流式布局

js 代码：

var waterBasic = (function () {
    function init() {
        var item_W = $(".water-item").outerWidth(true);
        var colNum = parseInt($('#contentBox').outerWidth(true) / item_W);//总列数
        var cols = [];
        for (var i = 0; i < colNum; i++) {
            cols.push(0);
        }
        var len = $(".water-item").length;
        var indexs = len;
        $(".water-item").each(function (i, item) {
            var col = (i + 1) % colNum;
            var index = col - 1 < 0 ? colNum - 1 : col - 1;
            var $cur = $(this);
            $cur.css('zIndex', len <= 4 ? 1 : indexs--);
            var left = col - 1 < 0 ? item_W * (colNum - 1) : item_W * (col - 1);
            var top = col - 1 < 0 ? item_W * (colNum - 1) : item_W * (col - 1);
            $cur.css('left', left);
            $cur.css('top', cols[index]);
            cols[index] += $(item).outerHeight(true);
        });
        cols.sort((a, b) => a - b);
        var max_i = cols.length - 1;
        var max_H = cols[max_i];
        $("#contentBox").css("height", max_H + 50);
    }
    // 设置窗口改变时也能重新加载
    $(window).on("resize", function () {
        setTimeout(function () {
            init();
        }, 1000);
    });
    return {
        init: init
    };
})();

效果：