超酷响应式瀑布流效果（jQuery）

1、
首先我们在#container放置多个.grid
<div class="grid">  
   <div class="img_area">  
    <img  class="lazy" src="images/pixel.gif" data-original="images/1.jpg"    style="max-width:90%" / alt="超酷响应式瀑布流效果（jQuery）" >  
   </div>  
   <strong>美女1</strong>  
   <p>jQuery超酷响应式瀑布流效果</p>  
   <div class="meta">  
    <a href="http://www.sucaihuo.com/js/74.html" target="_blank">点击查看>>></a>  
   </div>  
  </div>  
  <div class="grid">  
   <div class="img_area">  
    <img  class="lazy" src="images/pixel.gif" data-original="images/2.jpg"    style="max-width:90%" / alt="超酷响应式瀑布流效果（jQuery）" >  
   </div>  
   <strong>美女2</strong>  
   <p>jQuery超酷响应式瀑布流效果，更多插件请访问素材火 http://www.sucaihuo.com/js</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/7851">
                            <img src="https://img.php.cn/upload/jscode/000/000/009/168550560557650.jpg" alt="jQuery响应式无限滚动瀑布流特效">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/7851">jQuery响应式无限滚动瀑布流特效</a>
                            <p>jQuery响应式无限滚动瀑布流特效是一款基于jQuery响应式无限流动同时带画廊效果。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="jQuery响应式无限滚动瀑布流特效">
                                <span>71</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/7851" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="jQuery响应式无限滚动瀑布流特效">
                        </a>
                    </div>
                  
   <div class="meta">  
    <a href="http://www.sucaihuo.com/js/74.html" target="_blank">点击查看>>></a>  
   </div>  
</div>  
......
2、
接着同样我们在#test放置多个.grid，用于滚动加载复制。
<div id="test" style="display: none;">  
   <div class="grid">  
    <div class="img_area">  
     <img  class="lazy" src="images/pixel.gif" data-original="images/1.jpg"    style="max-width:90%" / alt="超酷响应式瀑布流效果（jQuery）" >  
    </div>  
    <strong>美女1</strong>  
    <p>jQuery超酷响应式瀑布流效果 点击查看》》》</p>  
    <div class="meta">  
     <a href="http://www.sucaihuo.com/js/74.html" target="_blank">点击查看>>></a>  
    </div>  
   </div>  
   ...... 
</div>
3、
引入jQuery库、懒加载插件lazyload及瀑布流插件blocksit.min.js
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>  
<script type="text/javascript" src="js/blocksit.min.js"></script>
懒加载
$("img.lazy").lazyload({ 
    load: function() { 
        $('#container').BlocksIt({ 
            numOfCol: 5, 
            offsetX: 8, 
            offsetY: 8 
        }); 
    } 
});
4、
滚动时加载
$(window).scroll(function() { 
    // 当滚动到最底部以上50像素时， 加载新内容 
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 50) { 
        $('#container').append($("#test").html()); 
        $('#container').BlocksIt({ 
            numOfCol: 5, 
            offsetX: 8, 
            offsetY: 8 
        }); 
        $("img.lazy").lazyload(); 
    } 
}); 
 
//window resize 
var currentWidth = 1100; 
$(window).resize(function() { 
    var winWidth = $(window).width(); 
    var conWidth; 
    if (winWidth < 660) { 
        conWidth = 440; 
        col = 2 
    } else if (winWidth < 880) { 
        conWidth = 660; 
        col = 3 
    } else if (winWidth < 1100) { 
        conWidth = 880; 
        col = 4; 
    } else { 
        conWidth = 1100; 
        col = 5; 
    } 
 
    if (conWidth != currentWidth) { 
        currentWidth = conWidth; 
        $('#container').width(conWidth); 
        $('#container').BlocksIt({ 
            numOfCol: col, 
            offsetX: 8, 
            offsetY: 8 
        }); 
    } 
});