lazyload +masonary 实现瀑布流(ajax请求数据)

lazyload +masonary 实现瀑布流(ajax请求数据)

1.初始化masonary

 $(function() {
        var masonryNode = $('#masonry');
        masonryNode.imagesLoaded(function() {
            masonryNode.masonry({
                itemSelector: '.waterfall-item',
                columnWidth: '.waterfall-item',
                gutter: 20,
                singleMode: true,
                isAnimated: true,
                resize: true,
            });
        })
       })

2.请求接口 获取列表数据

function getTemplateList(res){
    if(res.status=='200'){
        $("#masonry").html(res.data.template);
        // jQuery可以使用，增加字符串结构的HTML节点，但是masonry不行，所以当时用jQuery ajax动态加载节点时要将HTML节点转化成jQuery对象。
        //将dom节点转成jquery对象
        *重点1
        var $content=$(res.data.template)

        $('#masonry').imagesLoaded(function() {
        重点2:
        //填充dom节点内容 ,调用masonary appended方法 更新瀑布流布局
            $('#masonry').html( $content ).masonry( 'appended',
                $content );
            $('img.lazy-load').lazyload({
                placeholder:'assets/images/opacity-bg.png',
                effect: "fadeIn",
                threshold : 100,
                load:fluidLayout()
            });
        });
    }
}