jQuery超酷响应式瀑布流效果

参考  http://www.sucaihuo.com/js/74.html

 

<script src="scripts/blocksit.min.js"></script>

< div   id="container">
    < div   class="grid">
        <!-- content -->
    </ div >
    < div   class="grid">
    <!-- content -->
    </ div >
</ div >

　　

$(document).ready(function() {
    //blocksit define
    $(window).load( function() {
        $('#container').BlocksIt({
            numOfCol: 5, //一排放的个数
            offsetX: 0, //横向距离
            offsetY: 0, //纵向距离
            blockElement: '.grid' //瀑布流的盒子
        });
    });
    
    //window resize
    var currentWidth = 1100;
    $(window).resize(function() {
        var winWidth = $(window).width();
        var conWidth;
        if(winWidth < 660) {
            conWidth = 300;
            col = 1
        } else if(winWidth < 880) {
            conWidth = 660;
            col = 2
        } else if(winWidth < 1100) {
            conWidth = 880;
            col = 3;
        } else {
            conWidth = 1100;
            col = 5;
        }
        
        if(conWidth != currentWidth) {
            currentWidth = conWidth;
            $('#container').width(conWidth);
            $('#container').BlocksIt({
                numOfCol: col,
                offsetX: 0,
                offsetY: 0
            });
        }
    });
});