非你网

花瓣的内容排版是使用瀑布流的方式排版。实现瀑布流式的排版的插件蛮多的，blocksit 就是一个比较简便的插件。

依赖少，仅仅依靠 jquery。 css也少。用该插件，注意以下几个问题就可以了

1. 每次执行 BlocksIt 之前，设置父容器的宽度的时候要正确。

2. 图片加载完成后，再 BlocksIt 一次。防止，图片排版错乱。

其实，排版的是图片的父容器。使用的是绝对定位。而为什么总是说图片，就是因为所要展示的中心是图片。围绕图片，可以在图片上放置div，图片下边，等放置div。其结构可以有下边这样的层次构成。

<div id="container">
    <div class="grid">
        <img src="" />
        <span></span>
        <div></div>
        ......
    </div>
    <div class="grid">
    ......
    </div>
    ......
</div>

如果使用 ajax 去动态实现添加dom的话。图片加载完成在 BlocksIt 很重要。可以通过img的load回调来实现。如：

var len = $('#container').find('img').length;

$('#container').find('img').load(function(){
    len --;
    if(len == 0)
        render();
});

function render()
{
    //执行BlocksIt
}

结合 lazyload，实现图片懒加载。有些参数多次重复会用到，可以尝试定义变量。如果想做自适应，媒体查询设置很重要，对应的分隔点要仔细。

贴出部分代码。

js:

var colAndWidth = getColAndWidth();
    var col = colAndWidth.col, conWidth = colAndWidth.conWidth,offsetX = 5,offsetY = 1;

    $("img.lazy").lazyload({
        load:function(){
            render();
        }
    });

    $(window).scroll(function(){
        // 当滚动到最底部以上50像素时， 加载新内容
        if ($(document).height() - $(this).scrollTop() - $(this).height()<50){
            colAndWidth = getColAndWidth();
            col = colAndWidth.col;
            conWidth = colAndWidth.conWidth;

            $('#box-container').append($("#test").html());
            render();

            $("img.lazy").lazyload();
        }
    });

    function getColAndWidth()
    {
        var winWidth = $(window).width();
        winWidth += 10;

        if(winWidth < 1060)
        {
            return {col:2, conWidth:320};
        }
        else if(winWidth < 1210)
        {
            return {col:3, conWidth:480};
        }
        else if(winWidth < 1440)
        {
            return {col:4, conWidth:640};
        }
        else
        {
            return {col:5, conWidth:800};
        }
    }
    //window resize
    var currentWidth = 640;
    $(window).resize(function() {
        colAndWidth = getColAndWidth();
        col = colAndWidth.col;
        conWidth = colAndWidth.conWidth;

        if(conWidth != currentWidth) {
            currentWidth = conWidth;
            render();
        }
    });

    function render()
    {
        $('#box-container').width(conWidth);
        $('#box-container').BlocksIt({
            numOfCol:col,
            offsetX: offsetX,
            offsetY: offsetY
        });
    }

css 媒体查询(仿bootstrap)：

.container-fluid { width: 100%;  margin-right: auto;  margin-left: auto;  }

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;  }

@media (max-width: 910px) {  .container {  width: 710px;  }  }

@media (min-width: 910px) {  .container {  width: 710px;  }  }

@media (min-width: 1060px) {  .container {  width: 870px;  }  }

@media (min-width: 1210px) {  .container {  width: 1030px;  }  }

@media (min-width: 1440px) {  .container {  width: 1190px;  }  }

相关网站

http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/

https://segmentfault.com/a/1190000002759802

https://github.com/kennyooi/blocksit

http://www.xwcms.net/js/tpdm/35543.html