结合jQuery.lazyload和masonry实现瀑布流

发表于 分类于 阅读次数：

结合jQuery.lazyload和masonry实现瀑布流

这里主要是使用jQuery.lazyload配合masonry实现瀑布流的重新排列，有时候网站的速度慢，图片加载慢，获取不到图片的

宽度和高度，所以使用lazyload可以在图片加载完之后，进行瀑布流的重新排列。

实现方法如下：

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
/**
 * 自动刷新
 * @type {*|jQuery|HTMLElement}
 */
var $container = $('#main');
$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.item',
        columnWidth:205,
	    gutterWidth:10,
        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_index'},
            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, true);//追加元素
                        $container.imagesLoaded(function () {
                            $container.masonry();
                        });//加载完图片后，会实现自动重新排列。【这里是重点】
                    }

                    if(data.str_pages){
                        $('#page-nav').html(data.str_pages);//设置下一个分页的地址。【可以自己补充】
                    }
                }
            }
        });
    }
}