流式布局

js 代码：

 1 var waterBasic = (function () {
 2     function init() {
 3         var item_W = $(".water-item").outerWidth(true);
 4         var colNum = parseInt($('#contentBox').outerWidth(true) / item_W);//总列数
 5         var cols = [];
 6         for (var i = 0; i < colNum; i++) {
 7             cols.push(0);
 8         }
 9         var len = $(".water-item").length;
10         var indexs = len;
11         $(".water-item").each(function (i, item) {
12             var col = (i + 1) % colNum;
13             var index = col - 1 < 0 ? colNum - 1 : col - 1;
14             var $cur = $(this);
15             $cur.css('zIndex', len <= 4 ? 1 : indexs--);
16             var left = col - 1 < 0 ? item_W * (colNum - 1) : item_W * (col - 1);
17             var top = col - 1 < 0 ? item_W * (colNum - 1) : item_W * (col - 1);
18             $cur.css('left', left);
19             $cur.css('top', cols[index]);
20             cols[index] += $(item).outerHeight(true);
21         });
22         cols.sort((a, b) => a - b);
23         var max_i = cols.length - 1;
24         var max_H = cols[max_i];
25         $("#contentBox").css("height", max_H + 50);
26     }
27     // 设置窗口改变时也能重新加载
28     $(window).on("resize", function () {
29         setTimeout(function () {
30             init();
31         }, 1000);
32     });
33     return {
34         init: init
35     };
36 })();

效果：

 

转载于:https://www.cnblogs.com/kitty-blog/p/9956591.html