瀑布流布局

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