博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
瀑布流布局
阅读量:7233 次
发布时间:2019-06-29

本文共 924 字,大约阅读时间需要 3 分钟。

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

你可能感兴趣的文章
awk的数组的应用
查看>>
java----调用windows的DOS命令并回显/启动和关闭appium
查看>>
linux下配置ip地址四种方法(图文方法)转载
查看>>
Google Chrome 总提示flash插件过期,用命令行模式解决
查看>>
定位与坐标系算法
查看>>
化学绘图软件ChemDraw真的什么都能干!
查看>>
Python开发注意事项
查看>>
FUCKED-BUG之临时对象的生死
查看>>
【转】HTML5第一人称射击游戏发布
查看>>
centos配置私钥登录
查看>>
web本地存储-WebSQL
查看>>
ORACLE11g:No Dialect mapping for JDBC type: -9解决方案
查看>>
我的友情链接
查看>>
闲聊Ceph目前在中国的发展Ceph现状
查看>>
我的友情链接
查看>>
CACTI 95th模版导入 及95th模板下载
查看>>
请求头header里的contentType为application/json和capplition/x-www-form-urlencoded
查看>>
迁云的那些事
查看>>
jquery ui 和ext.js一些区别,欢迎给位指正批评
查看>>
clj-xmemcached: memcached client for clojure
查看>>