Bootstrap-waterfall瀑布流

http://wlog.cn/waterfall/

js引用

<link href="path/to/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-waterfall.js"></script>      

HTML结构

使用一个div来作为瀑布流的容器

<div id="waterfall-container">
    <!-- Should have markups of the list of pins here -->
</div>

在容器中可以放置列表或一组div元素

<ul class="pin"><img src="" /></ul>
<ul class="pin"><img src="" /></ul>
<ul class="pin"><img src="" /></ul>
或者
<div class="pin"><img src="" /></div>
<div class="pin"><img src="" /></div>
<div class="pin"><img src="" /></div>  

img标签需要使用一个div来包裹并为容器设置一个宽度：

<div class="pin">
  <img src="images/3.jpg" />
</div>  

.waterfall .pin {
  width: 200px;
}   

初始化

$(function(){
    $('#container').waterfall({
        itemCls: 'item',
        colWidth: 230,
        gutterWidth: 15,
        gutterHeight: 15,
        checkImagesLoaded: true,
        dataType: 'html',
        path: function(page) {
            return '/ajax/?page=' + page;
        },
        callbacks:{
            /*
             * loadingError
             * @param {String} xhr , "end" "error"
             */
            loadingError: function($message, xhr) {
                $message.html('');
            },
            loadingStart:function($message, xhr){
                $message.html('');
            }
        }
    });
    $('.container-block').css({'visibility':'visible'})
});

{
    itemSelector:'.post-home',   // 子元素id/class, 可留空
    columnCount:4,               // 列数,  纯数字, 可留空
    columnWidth:300              // 列宽度, 纯数字, 可留空
    isResizable: false,          // 自适应浏览器宽度, 默认false
    isAnimated: false,           // 元素动画, 默认false
    Duration: 500,               // 动画时间
    Easing: "swing",             // 动画效果, 配合 jQuery Easing Plugin 使用
    endFn: function(){}          // 回调函数
}