Zepto + 懒加载 + 瀑布流 请问如何实现呢？

Question

如标题所说，该如何实现移动端的瀑布流功能(瀑布流 按列分)？ 非常感谢！

Answer 1

自己项目里的,你参考一下,需引入imgLazyLoad插件

var scrollHeight = $(document).height();
var windowHeight = $(window).height();
var scrollTop = 0;
$(window).scroll(function(){
    scrollTop = $(this).scrollTop();
    if (scrollTop + windowHeight == scrollHeight) {
        if(lock){
            tips('没有更多数据', 1500);
            return false;
        }
        lock = true ;
        $.ajax({
            type:'get',
            url:'&start='+start+'&offset='+offset,
            data:'',
            success:function(a){
                if(a.length > 0){
                    for (var i = 0; i < a.length; i++) {
                        html += '<li data-id="' + a[i].tid + '">'
                             + '<div class="img">'
                             +  '<img src="images/default-358-358.png" data-src="' + a[i].attachment + '">'
                             +  '</div>'
                             +  '</li>';
                    }
                    $('.picture-list').append(html);
                    //图片懒加载
                    $.imgLazy({viewport: true});
                    start += offset;
                    html = '';
                    lock = false;
                }else{
                    tips('没有更多数据', 1500);
                }
            },
            error:function(a){
                tips('加载失败', 1500);
            },
            dataType:'json'
        });
    }
});