HTML5开发动态网格布局的jQuery插件BlocksIt.js 瀑布流

    HTML5瀑布流效果——BlocksIt.js 瀑布流

    动态网格布局的jQuery插件

<script src="js/jquery.min.js"></script>

<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

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

<script>

$(document).ready(function() {

      

    //blocksit define

    $(window).load( function() {

        $('#container').BlocksIt({

            numOfCol: 5,

            offsetX: 8,

            offsetY: 8,

            blockElement: '.grid'

        });

    });

    //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

            });

        }

    });

});

</script>

参考地址：http://www.h5edu.cn/usercode/3dda8a1ce5fde190a23495dde95e49e614d7a362/