Bootstrap+Masonry+imagesLoaded 快速实现瀑布流

<div id="masonry" class="container-fluid">

 

    <div class="thumbnail">

        <div class="imgs">

            <img src="" />

        </div>

        <div class="caption">

            <div class="title"></div>

            <div class="content">

                 

            </div>

        </div>

    </div>

     

</div>

<script>

    $(function() {

     

        var masonryNode = $('#masonry');

        masonryNode.imagesLoaded(function(){

            masonryNode.masonry({

                itemSelector: '.thumbnail',

                isFitWidth: true

            });

        });

         

         

    });

</script>

// 首先将新元素添加到页面容器中

 

masonryNode.append(newItems);

// 等待新元素中的图片加载完毕

newItems.imagesLoaded(function(){

 

// 调用瀑布流布局的appended方法

    masonryNode.masonry('appended',  newItems);

});

$(window).scroll(function() {

                 

    if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

         

        if(!imagesLoading) {

            appendToMasonry();

        }

         

    }

     

});