详解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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
React 组件间的通信示例
Jun 14 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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
人族 Terran 基本策略
2020/03/14 星际争霸
php通过session防url攻击方法
2014/12/10 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python集合常见运算案例解析
2019/10/17 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python开发入门——列表生成式
2020/09/03 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
信息技术课教学反思
2016/02/23 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js