瀑布流布局

1、点击取消就刷新，防止模板不刷新导致bug
2、循环元素，if(第一排) else(其他排)
3、数组arr存放第一排高度
4、获取arr最小值height以及索引index
5、top最小值heihgt ,left 最小值arr[index].offset().left

(function () {

　　var arr = [];

　　var minHeight = 0;

　　var current = 0;

　　var padding = 20;

　　var border = 1;

　　$.each($(".flow_a1"), function (m) {

　　　　if (m < 4) {

　　　　　　arr.push($(this).height());

　　　　} else {

　　　　　　minHeight = arr[0];

　　　　　　current = 0;

　　　　　　for (var i = 0; i < 4; i++) {

　　　　　　　　if (minHeight > arr[i]) {

　　　　　　　　　　minHeight = arr[i];

　　　　　　　　　　current = i;

　　　　　　　　}

　　　　　　}

　　　　　　var top = minHeight;

　　　　　　console.log("current=" + current);

　　　　　　var left = $(".flow_a1").eq(current).offset().left - padding - border;

　　　　　　console.log("minHeight =" + minHeight);

　　　　　　$(this).css({ "position": "absolute", "top": top, "left": left });

　　　　　　arr[current] += $(".flow_a1").eq(m).height();

　　　　}

　　});

})();

转载于:https://www.cnblogs.com/yuyedaocao/p/10877009.html