jQuery超酷响应式瀑布流效果

Posted 2020-11-05 卖酱油的周董

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

 

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

1 2 3 4 5 6 7 8

<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
            });
        }
    });
});