Django 整合 jQuery Waterfall 插件 实现瀑布流

发表于 分类于 阅读次数：

Django实现瀑布流

需要Waterfall插件，jQuery Waterfall插件的使用这一节已经说过了

这里使用的时候可能会比较简短，跟上一篇文章有太多的不一样，不过这里使用的时候，调用的是html格式的数据。

Django Server端代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
def ajax(request):
    '''ajax请求数据'''
    if request.user.is_authenticated():
        user = request.user
    else:
        user = request.user
    try:
        items = Gifts.objects.filter(is_show = 0).order_by('-create_date')[10:20]
    except:
        items = []

    return render_to_response('home/ajax.html',{'action':'home','items':items,'user':user},context_instance=RequestContext(request))

ajax.html代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% load staticfiles %}
{% load dajaxice_templatetags %}

{% if items %}
{% for item in items %}
<div class="item" >
    <a target='_blank' title='{{ item.title }}' href='{{ item.url_address }}'>
        <img src="{{ MEDIA_URL }}{{ item.large_image }}" width="192" height="288">
    </a>
    <h3>{{ item.title|slice:"10" }}</h3>
    <p>{{ item.description|slice:"100" }}</p>
    <p>
        <a class="btn btn-primary" target='_blank' href="{{ item.url_address }}">浏览</a>
        <a class="btn have_feeling" href="#" onclick="Dajaxice.walkerfree.feeling(feeling_callback, {'id':'{{ item.id }}','type':'woman'});return false;">有感觉</a>
        <a class="btn no_feeling" href="#" onclick="Dajaxice.walkerfree.no_feeling(no_feeling_callback,{'id':'{{ item.id }}','type':'woman'});return false;">没感觉</a>
        <input type='hidden' value='woman' name='type'>
    </p>
</div>
{% endfor %}
{% endif %}

因为是调用的html格式的数据，这里就直接的将数据展示出来了。

调用数据的页面的html代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id='container'>
    {% if items %}
    {% for item in items %}
    <div class="item" >
        <a target='_blank' title='{{ item.title }}' href='{{ item.url_address }}'>
            <img src="{{ MEDIA_URL }}{{ item.large_image }}" width="192" height="288">
        </a>
        <h3>{{ item.title|slice:"10" }}</h3>
        <p>{{ item.description|slice:"100" }}</p>
        <p>
            <a class="btn btn-primary" target='_blank' href="{{ item.url_address }}">浏览</a> 
            <a class="btn have_feeling" href="#" onclick="Dajaxice.walkerfree.feeling(feeling_callback, {'id':'{{ item.id }}','type':'woman'});return false;">有感觉</a>
            <a class="btn no_feeling" href="#" onclick="Dajaxice.walkerfree.no_feeling(no_feeling_callback,{'id':'{{ item.id }}','type':'woman'});return false;">没感觉</a>
            <input type='hidden' value='woman' name='type'>
        </p>
    </div>
    {% endfor %}
    {% endif %}
</div>

调用的script如下：

1
2
3
<script type='text/javascript' src="/static/js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="/static/waterfall/js/libs/handlebars/handlebars.js"></script>    
<script type='text/javascript' src="/static/waterfall/js/waterfall.min.js"></script>

瀑布流的实现部分如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
    $('#container').waterfall({
        itemCls: 'item',
        colWidth: 210,
        gutterWidth: 15,
        gutterHeight: 15,
        checkImagesLoaded: false,
        dataType: 'html',
        path: function(page) {
            return '/ajax/?page=' + page;
        }

    });
    $('.container-block').css({'visibility':'visible'})
});