Masonry 不使用Infinite 实现数据无限加载 ajax无限加载【通过分页自动加载】

发表于 分类于 阅读次数：

masonry 不使用Infinite 实现数据无限加载 ajax无限加载【通过分页自动加载】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!-- 引入文件 -->
<script type="text/javascript" src="/wap/js/masonry/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/wap/js/masonry/js/jquery.infinitescroll.min.js"></script>

<div class="bg_e7">
    <div class="p4_3">
        <ul class="ul_mt4" id="masonry">
            {#foreach $list as $item#}<!-- foreach循环 多个DOM元素 -->
            <li class="masonry-item">
                <div class="dierg"></div>
                <div class="p04">
                    <div>
                        <a href='{#wap_url_reset("{#$item.mark#}/show","id/{#$item.oid#}")#}'>
                            <img width="143" src="{#$item.cover#}" />
                        </a>
                    </div>
                    <div class="p3_5">
                        <div class="h24_jc_c666">
                            <a href='{#wap_url_reset("{#$item.mark#}/show","id/{#$item.oid#}")#}'>
                                {#$item.o_title|cut_str:7#}
                            </a>
                        </div>
                        <div class="h20_c666">
                            <a href='{#wap_url_reset("{#$item.mark#}/show","id/{#$item.oid#}")#}'>
                                {#$item.o_content|cut_str_with_string:7#}
                            </a>
                        </div>
                        <div class="h22_lh20">
                            <div class='{#if $item.mark == "news"#}zx_img1{#elseif $item.mark == "case"#}anli_1{#elseif $item.mark == "activity"#}fbg1_bg{#/if#}'>
                                <a href='{#wap_url_reset("{#$item.mark#}/index")#}'>
                                    {#$wapcategory[$item.cid].cat_name#}
                                </a>
                            </div>
                            <div class="fr_cb2">
                                {#if $item.ccid#}
                                <strong class="color3">/</strong> <a href='{#wap_url_reset("{#$item.mark#}/index","cid/{#$item.cid#}-ccid/{#$item.ccid#}")#}'>{#$wapcategory[$item.ccid].cat_name#}</a>
                                {#/if#}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="diyig"></div>
            </li>
            {#/foreach#}
        </ul>
    </div>

    <div id="page-nav" style="display: none">
        <div class="pages"><b class="page_icon">上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" rel="2">下一页</a></div>
    </div>

    <div class="h100_cboth"></div>
    <div class="min_w640"><div class="pdwei_img"><img src="/wap/images/wfd_img.jpg" width="100%" /><div class="dwenimg"><img src="/wap/images/gbi.png" /></div></div></div>
</div>
<script>
    $(function(){
        var $container = $('#masonry');
        $container.imagesLoaded( function(){
            $container.masonry({
                itemSelector : '.masonry-item',
                gutterWidth : 2,
                isAnimated: true
            });
        });

        var pre_href;
        //滚动
        $(window).scroll(function(){
            // 当滚动到最底部以上100像素时， 加载新内容
            if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
                ajax_load_data();
            }
        });

        function ajax_load_data(){
            var href = $('#page-nav').find('.nextprev').attr('href');
            if(href && href != pre_href){
                console.log('href = '+href);
                pre_href = href;

                $.ajax({
                    url:href,
                    data:{'act':'ajax_wap_news'},
                    dataType:'json',
                    type:'post',
                    beforeSend:function(){
                        show_loading_body();
                    },
                    complete:function(){
                        show_loading_body();
                    },
                    success:function(data){
                        if(data.status != undefined && data.status == 'ok'){
                            if(data.html){
                                var $boxes = $( data.html );
                                $container.append( $boxes ).masonry( 'appended', $boxes);
                            }

                            if(data.str_pages){
                                $('#page-nav').html(data.str_pages);
                            }
                        }
                    }
                });
            }
        }
    });
</script>