jQuery实现瀑布流布局详解（PC和移动端）

瀑布流布局是什么

瀑布流布局又称 Pinterest 布局，是一种展示方式，将内容展示成多列、高度不定的瀑布流风格，适用于展示图片、文章等内容。Pinterest 就是一个典型的瀑布流网站。

实现瀑布流布局的核心原理

实现瀑布流布局的核心原理是通过 JavaScript 动态计算出每一列的高度，然后将下一个元素按照高度最小的列进行插入。

如何使用 jQuery 实现瀑布流布局

步骤一：定义 HTML 结构

首先，定义一个容器，多个元素放置在容器内。每个元素内可以放置图片、文字或其他 DOM 元素。

<div id="container">
    <div class="box">
        <div class="content">
            <!-- 元素内容 -->
        </div>
    </div>
    ...
</div>

步骤二：定义 CSS 样式

首先，给容器设置基本样式：

#container {
    position: relative;
    margin: 0 auto;
    width: 960px;
}

然后，给每个元素设置样式：

.box {
    position: absolute;
    /* 这里将 left 和 top 设置为 0 为了方便后面 js 代码调用 */
    left: 0;
    top: 0;
    width: 230px;
    margin: 10px;
    /* 元素的背景需要透明，否则会覆盖前面的元素 */
    background-color: rgba(0, 0, 0, 0);
}

步骤三：使用 jQuery 实现瀑布流布局

$(window).on('load',function() {
    // 取得容器和子元素
    var $container = $('#container');
    var $boxs = $container.children('.box');
    // 定义瀑布流列数和间距
    var boxWidth = $boxs.eq(0).width() + 20;
    var windowWidth = $(window).width();
    var cols = Math.floor(windowWidth / boxWidth);

    var colHeightArr = [];
    $boxs.each(function(index, value) {
        var boxHeight = $(value).height() + 20;
        if (index < cols) {
            colHeightArr[index] = boxHeight;
        } else {
            var minHeight = Math.min.apply(null, colHeightArr);
            var minIndex = $.inArray(minHeight, colHeightArr);
            $(value).css({
                'position': 'absolute',
                'top': minHeight,
                'left': minIndex * boxWidth
            });
            colHeightArr[minIndex] += boxHeight;
        }
    });
});

步骤四：处理容器的高度

由于元素是绝对定位的，需要根据内容自适应高度，最后要计算总高度，让容器撑起来。

// 取得高度最大列的高度作为容器高度
var maxHeight = Math.max.apply(null, colHeightArr);
$container.height(maxHeight);

相关示例

示例一：使用 Ajax 加载数据

$(window).on('scroll', function() {
    if (checkScrollSlide) {
        $.ajax({
            url: './getlist.php',
            dataType: 'json'
        }).done(function(data) {
            $.each(data, function(index,value) {
                var $newBox = $("<div>").addClass('box').appendTo($('#container'));
                $("<div>").addClass('content').appendTo($newBox).html(value.imgSrc);
            });
            waterFall();
        });
    }
});

function checkScrollSlide() {
    var $lastBox = $('#container>.box').last();
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.height() / 2);
    var scrollTop = $(window).scrollTop();
    var documentHeight = $(document).height();
    return (lastBoxDis < scrollTop + documentHieght) ? true : false;
}

示例二：响应式布局

对于移动设备，需要以屏幕宽度为瀑布流列数做计算。

function setWaterFall() {
    var $container = $('#container');
    var $boxs = $container.children('.box');
    var windowWidth = $(window).width();
    var boxWidth = $boxs.eq(0).outerWidth(true);
    var cols = Math.floor(windowWidth / boxWidth);

    $container.width(cols * boxWidth);
    var colHeightArr = [];
    $boxs.each(function (index, value) {
        var boxHeight = $(value).outerHeight(true);
        if (index < cols) {
            colHeightArr[index] = boxHeight;
        } else {
            var minHeight = Math.min.apply(null, colHeightArr);
            var minIndex = $.inArray(minHeight, colHeightArr);
            $(value).css({
                'position': 'absolute',
                'top': minHeight,
                'left': minIndex * boxWidth
            });
            colHeightArr[minIndex] += boxHeight;
        }
    });
    // 取得高度最大列的高度作为容器高度
    var maxHeight = Math.max.apply(null, colHeightArr);
    $container.height(maxHeight);
}