详解javascript实现瀑布流列式布局


Posted in Javascript onJanuary 29, 2016

本文介绍了javascript瀑布流列式布局的相关内容,分享给大家供大家参考,具体内容如下

详解javascript实现瀑布流列式布局

JS原理

上面说了,列式布局简直算是完虐绝对式布局. 绝对式布局,简直就像10元/天 的搬砖工。而列式布局就是站在那看他搬砖的监工。 同样都是搬砖的,一个卖苦力,一个秀智商。简直了!!!
听了逼逼,我们来直面一下惨淡的人生。
列式布局的原理其实和绝对式布局没有太大的却别。
同样也有3个部分, 一是页面加载自适应,二是滑动加载,三是响应式布局。
分别讲解:

1、加载自适应

我们先看一下代码吧:

var $ = function() { //一个hacks
  return document.querySelectorAll.apply(document, arguments);
}
var waterFall = (function(){
  //初始化布局
  var arrHeight = []; //列的高度
  var columns = function() { //计算页面最多可以放多少列
      var bodyW = $('#container')[0].clientWidth,
        pinW = $(".column")[0].offsetWidth;
      return Math.floor(bodyW / pinW);
    }
    //设置瀑布流居中
  var getHtml = function() {
      var cols = $('.column'), //获得已有的列数
        arrHtml = [];
      for (var i = 0, col; col = cols[i++];) {
        var htmls = col.innerHTML.match(/<img(?:.|\n|\r|\s)*?p>/gi); //获取一个columns的
        arrHtml = arrHtml.concat(htmls);
      }
      return arrHtml;
    }
    //获得数组中最低的高度
  var getMinIndex = function() { //获得最小高度的index
    var minHeight = Math.min.apply(null, arrHeight); //获得最小高度
    for (var i in arrHeight) {
      if (arrHeight[i] === minHeight) {
        return i;
      }
    }
  }
  var createCol = function() {
      var cols = columns(), //获得列数
        contain = $("#container")[0];
      contain.innerHTML = ''; //清空数据
      for (var i = 0; i < cols; i++) {
        var span = document.createElement("span");
        span.className = "column";
        contain.appendChild(span);
      }
    }
    //初始化列的高度
  var initHeight = function() {
      var cols = columns(),
        arr = [];
      for (var i = 0; i < cols; i++) {
        arr.push(0);
      }
      arrHeight = arr;
    }
   //创建一个ele并且添加到最小位置
  var createArticle = function(html){
    var cols = $('.column'),
      index = getMinIndex(),
      ele = document.createElement('article');
    ele.className = "panel";;
    ele.innerHTML = html;
    cols[index].appendChild(ele);
    arrHeight[index] += ele.clientHeight;
  }
  //遍历获得的html然后添加到页面中
  var reloadImg = function(htmls) {
    for (var i = 0, html, index; html = htmls[i++];) {
      createArticle(html);
    }

  }
  var onload = function() {
      var contain = $("#container")[0], //获得容器
        arrHtml = getHtml(); //获得现有的所有瀑布流块
      //创建列,然后进行加载
      createCol();
      //初始化arrHeight
      initHeight();
      //进行页面的重绘
      reloadImg(arrHtml);
      return this;
    }
})();

看见一个程序,先找他的入口函数,显然,一开始应该是onload,那么,观察onload函数. 可以发现,里面一共有4个函数.
由于用户的宽度不确定,所以我们的列数也不是一定的。这时候,就需要获取实际尺寸然后进行一个计算才行。然后需要对原有的数据,进行重排。
所以,getHtml就是来获取一开始的原有数据(innerHTML);
然后就可以更具宽度来添加列了。
createCol函数就是更具宽度来添加列的。
这时候,我们需要一个数组(arrHeight)来保存每列的高(默认都为0).
然后就可以进行页面重排=>reloadImg(arrHtml), arrHtml就是原始数据。
好,我们这里初级搬砖完成。
接下来,是要开始加固了。

2、滑动加载

这个应该算是我直接copy过来的,所以说,函数写的好,重用性也是棒棒哒。

show u code

var isLoad=function() { //是否可以进行加载
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
      point = scrollTop + wholeHeight; //页面底部距离header的距离
    var lastHei = Math.min.apply(null,arrHeight);
    return (lastHei < point) ? true : false;
  }

  var dealScroll = (function(){
    window.onscroll = ()=>{dealScroll();}
    var container = $('#container')[0];
    return function(){
      if(isLoad()){
        for(var i = 0,html,data;data = dataInt[i++]; ){
          html = tpl.temp(data.src); //获得数据然后添加模板
          createArticle(html);
        }
      }
      return this;
    }
  })();

同样的isload,同样的dealScroll的逻辑。 这里需要说明的就是,createArticle就是给最低高度列添加砖块的函数。
然后,就没有然后啦.

3、响应式布局

这个我也是直接copy过来的。

var resize = (function(){
    window.onresize = ()=>{resize();};
    var flag;
    return function(){
      clearTimeout(flag);
      flag = setTimeout(()=>{onload();},500);
      return this;
    }

需要说明的是,onload,dealScroll,resize这3个函数,后面我都加上"return this". 目的是可以进行链式调用,以备后面重用性的需要。

以上就是本文的全部内容,希望对大家学习javascript瀑布流有所帮助。

Javascript 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
浅谈开发eslint规则
Oct 01 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 #Javascript
理解Javascript文件动态加载
Jan 29 #Javascript
JavaScript操作select元素和option的实例代码
Jan 29 #Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 #Javascript
Angularjs中UI Router全攻略
Jan 29 #Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 #Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 #Javascript
You might like
常用的php对象类型判断
2008/08/27 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
mongodb和php的用法详解
2019/03/25 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
Maps Javascript
2007/01/22 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
Python的词法分析与语法分析
2013/05/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
致全体运动员广播稿
2014/02/01 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
大学生实习证明范本
2014/09/19 职场文书
大学生在校表现评语
2014/12/31 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL