javascript瀑布流布局实现方法详解,javascript瀑布

正文介绍了javascript瀑布流列式布局的连带内容,分享给我们供大家参谋,具体内容如下

详解javascript完毕瀑布流列式布局,详解javascript瀑布

本文介绍了javascript瀑布流列式布局的有关内容,分享给大家供大家参照他事他说加以考察,具体内容如下

图片 1

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的逻辑。
这里须求验证的正是,create阿特icle便是给最低高度列加多砖块的函数。
接下来,就从否则后啦.

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瀑布流布局达成方式详解,javascript瀑布

本文实例陈述了javascript瀑布流布局完毕情势。分享给大家供我们参考,具体如下:

html结构:

<div id="waterfall">
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
</div>

css样式表:

*{margin:0;padding: 0}
#waterfall{position: relative;}
.mod-box{
  padding: 15px 0 0 15px;
  float: left;
}
.mod-img{
  padding: 9px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  position: relative;
}
.mod-img img{
  width: 310px;
  height: auto;
}

javascript代码:

window.onload = function(){
   waterFall("waterfall","mod-box");
}
window.onscroll = scroll;
window.onresize = function() {
  if(re)clearTimeout(re);
  var re = setTimeout(function() {
  waterFall("waterfall","mod-box");
   }, 200);
}
var dataInit = {
  "data": [
    {
      "src": "5.jpg"
    },
    {
      "src": "6.jpg"
    }
   ]
  };
/**
 * 滚动添加数据函数
 */
function scroll(){
 var flag = checkScroll("waterfall","mod-box");
 if(flag ){
   var oparent = document.getElementById("waterfall");
   var htmlStr = "";
   var len = dataInit.data.length;
   for(var i=0;i<len;i++){
     htmlStr+=""; //需要插入的结构
   }
   oparent.innerHTML+=htmlStr;
   waterFall("waterfall","mod-box"); //重新调用一次
 }
}
/**
 * 瀑布流函数
 * @param parentID 容器id
 * @param clsName 数据块className
 */
function waterFall(parentID,clsName){
  var oParent = document.getElementById(parentID); // 父级对象
  //将content下所有class为mod-box的元素取出来
  var oBoxs = getObjsByClassName(oParent,clsName);// 获取存储块框clsName的数组oBoxs
  var oBoxWidth = oBoxs[0].offsetWidth;  //obox的宽 ==>310+9*2+2+15 = 345(包含边框和内边距) 一个块框的宽
  var pageWidth = document.documentElement.clientWidth; //页面可视宽度
  //var pageWidth = document.documentElement.offsetWidth; //页面可视宽度
  var cols = Math.floor(pageWidth/oBoxWidth); //计算整个页面显示的列数(页面宽/obox的宽)每行中能容纳的mod-box个数
  var hAarr = []; //用于存储 每列中的所有块框相加的高度。
  var minH;   
  var minHIndex;    //最小高度对应的索引值
  for(var i = 0;i<oBoxs.length;i++){//遍历数组aPin的每个块框元素
    oBoxs[i].style.position="absolute";
    if(i<cols){ //把第一行排放好,并将每一列的高度记入数据hAarr
      hAarr.push(oBoxs[i].offsetHeight);
      oBoxs[i].style.top=0+"px";
      oBoxs[i].style.left=oBoxWidth*i+"px";
    }else{
      minH = Math.min.apply(null,hAarr); //数组hAarr中的最小值minH
      minHIndex = getMinhIndex(hAarr,minH);
      oBoxs[i].style.top=minH+"px";
      // oBoxs[i].style.left=oBoxWidth*minHIndex+"px";
      oBoxs[i].style.left= oBoxs[minHIndex].offsetLeft+"px";
      //数组 最小高元素的高 + 添加上的aPin[i]块框高
      hAarr[minHIndex]+=oBoxs[i].offsetHeight; //更新添加了块框后的列高
    }
  }
  var maxH = Math.max.apply(null,hAarr);
  oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; //设置父级居中样式:定宽+自动水平外边距
}
/**
 * 检查是否符合加载数据(滚动到最后一个oBox)
 * @param parentID 容器id
 * @param clsName 数据块className
 * @returns {boolean}
 */
function checkScroll(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  var oBoxs = getObjsByClassName(parentObj,clsName);
  var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
  //创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
  //标准模式与混杂模式
  var height = document.documentElement.clientHeight; //页面高度
  return (lastBoxH<scrolltop+height)?true:false;
}
/**
 * 根据class获得元素
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  if(!parentObj){
    return;
  }
  var childObjs = parentObj.getElementsByTagName("*"); //获取 父级的所有子集
  var calssObjs = []; //创建一个数组 用于收集子元素
  for(var i in childObjs){//遍历子元素、判断类别、压入数组
    if(childObjs[i].className==clsName){ 
      calssObjs.push(childObjs[i]);
    }
  }
  return calssObjs;
}
/**
 * 获取最小值的索引minIndex
 * @param arr
 * @param minH
 * @returns {string}
 */
function getMinhIndex(arr,minH){
  for(var i in arr){
    if(arr[i]===minH){
      return i;
    }
  }
}

越来越多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript切换特效与本事总括》、《JavaScript动画特效与本领汇总》、《JavaScript错误与调治本事计算》、《JavaScript扩张技能总括》及《JavaScript运动功能与本事汇总》

盼望本文所述对我们JavaScript程序设计有所协理。

详解javascript完结瀑布流相对式布局,javascript瀑布

瀑布流也应该算是流行几年了呢。首先是由Pinterest掀起的浪潮,然后本国设计如多如牛毛般,冒经典多瀑布流的例证,比方,香信街,马克之(可是近日涉黄,好像被喝茶了),还应该有天猫的
“哇哦”. 那些都是很棒的例子, 明天大家就聊一聊瀑布流。
一、相对式布局:

图片 2

JS完毕原理

实质上瀑布式首要的困难就在于,假诺将图片整齐的排列在对应的列下,以及哪些时候起头刷新加载图片。
而图片整齐的排列的关键逻辑和算法即,先得到容器内能够放多少列,然后,通过测算,存放第一列的莫斯中国科学技术大学学,再遍历剩下(除第一列的成分)的可观,分别放入,中度最小的那一列。
各种增加,最终完工遍历。
发端刷新的安装就很简短了,瀑布流刷新只和三个事件有关,即,window.onscroll.
重要的算法即,当页面滑动到低于高度的时候早先加载节点并且增加,当然,节点增多的个数是不牢固的。
先上代码吧,我这里分3部分教学,叁个是图形的排列,一个是设置加载的地点.别的再补偿多个响应式加载。

1、图片排列

var $ = function() {
  return document.querySelectorAll.apply(document, arguments);
 }
 var arrHeight = []; //得到分列的高度
 var columns = function() { //计算页面最多可以放多少列
  var containerW = $("#main")[0].clientWidth,
   pinW = $(".pin")[0].offsetWidth;
  return Math.floor(containerW / pinW);
 }
 var getIndex = function(arr) { //获得最小高度的index
   var minHeight = Math.min.apply(null, arr); //获得最小高度
   for (var i in arr) {
    if (arr[i] === minHeight) {
     return i;
    }
   }
  }
  //根据列数确定第一排img的高度并放入数组当中。
 var setCenter = (function() { //通过列数设置宽度
  var main = $('#main')[0]; //获得罩层
  var getPadding = function() { //设置padding
   var col = columns(); //获得最后一列
   var padding = main.clientWidth - col * $('.pin')[0].offsetWidth;
   return padding / 2;
  }
  var getComputedStyle = function(ele) { //兼容IE的支持情况
   if (window.getComputedStyle) {
    return window.getComputedStyle(ele);
   } else {
    return ele.currentStyle;
   }
  }
  var getPinPad = function() { //获得pin的padding值
   var pin = $(".pin")[0];
   return parseInt(getComputedStyle(pin).paddingLeft);
  }
  return function() { //设置宽度
   main.style.padding = `0 ${getPadding()}px 0 ${getPadding()-getPinPad()}px`;
  }
 })();
 var overLoad = function(ele) {
  var index = getIndex(arrHeight),
   minHeight = Math.min.apply(null, arrHeight), //获取最小高度
   pins = $('.pin'),
   style = ele.style;
  style.position = "absolute";
  style.top = minHeight + "px"; //设置当前元素的高度
  style.left = pins[index].offsetLeft + "px";
  arrHeight[index] += ele.offsetHeight;
 }
 //初始化时执行函数
 var init = function() {
   var pins = $(".pin"),
    col = columns();
   setCenter(); //设置包裹容器的宽度
   for (var i = 0, pin; pin = pins[i]; i++) {
    if (i < col) { //存储第一排的高度
     arrHeight.push(pin.offsetHeight);
    } else {
     overLoad(pin); //将元素的位置重排
    }
   }
  }

里头一共有7个函数(大函数),四个变量。 说一下思路吧。 首先,页面onload之后
试行的函数是 init. 要明了,三个js程序一定有他的输入,关键看您怎么找了。
然后大家深切init函数体,旁观。init里面执行的业务逻辑就是存款和储蓄第一排成分的高度,然后重排剩下的因素。
通过columns函数来获取当前窗口最多能够放下多少列,然后设置容器的居中(通过padding设置就可以).
接下去,遍历pin的单元框,将首先排的因素高度存放在arrHeight数组里,将多余的要素举行重排。
别的的函数认为没什么讲明的须要了。 大家入眼来看一下overLoad函数.
2、overLoad

var overLoad = function(ele) {
  var index = getIndex(arrHeight),
   minHeight = Math.min.apply(null, arrHeight), //获取最小高度
   pins = $('.pin'),
   style = ele.style;
  style.position = "absolute";
  style.top = minHeight + "px"; //设置当前元素的高度
  style.left = pins[index].offsetLeft + "px";
  arrHeight[index] += ele.offsetHeight;
 }

在overLoad里面有getIndex函数,获取最小中度的index,然后就能够安装传入进来的ele成分的地方(相对定位),
top为数组中幽微高度的px值,left就为率先排制订的Index成分的左侧距地点。
最后更新一下莫大,ok!!! that’s enough.
3、设置加载地方

var dataInt = [{
  'src': '1.jpg'
 }, {
  'src': '2.jpg'
 }, {
  'src': '3.jpg'
 }, {
  'src': '4.jpg'
 }, {
  'src': '1.jpg'
 }, {
  'src': '2.jpg'
 }, {
  'src': '3.jpg'
 }, {
  'src': '4.jpg'
 }];

 function isLoad() { //是否可以进行加载
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
   point = scrollTop + wholeHeight; //页面底部距离header的距离
  var arr = $('.pin');
  var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
  return (lastHei < point) ? true : false;
 }
 //处理滑动
 var dealScroll = (function() {
  var main = $('#main')[0],
   flag = true;
  return function() {
   if (isLoad() && flag) {
    for (var i = 0, data; data = dataInt[i++];) {
     var div = document.createElement('div');
     div.innerHTML = temp(data.src);
     div.className = "pin";
     main.appendChild(div);
     overLoad(div); //和上面的overload有耦合性质
    }
    flag = false;
    setTimeout(function() { //控制滑行手速,时间越长对速度的滑动时间影响越大。
     flag = true;
    }, 200);
   }
  }
 })();

 function temp(src) {
  return `
  <div class="box">
   <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
  </div>
 `;
 }

实质上,杰出就在上有些,这么些只是作为一个加载数据的一手,当然,你能够点击加载(手动触发),也许其余的加载方法。
当然,怎么设置完全都以在于你的。 所以,随大流,还是是经过减少滚动加载。
继续,找入口函数->dealScroll.
该函数实施的职分正是,通过isload函数,剖断是不是能够进行加载决断。
大家看一下isload函数,这一个正是滚动加载的基本点点.

 function isLoad() { //是否可以进行加载
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
   point = scrollTop + wholeHeight; //页面底部距离header的距离
  var arr = $('.pin');
  var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
  return (lastHei < point) ? true : false;
 }

由此测算得出,页面尾巴部分距视口的职位(工具条下部) 与
最后一个因素的相对地方相比,即便 滑动距离超过,则启用加载。
yeah~ That’s over.
back to dealScroll
接下去就是看加载的一部分了,这么些有个别其实也没怎么说的,就是创设贰个div节点,然后将她放到容器的末段,何况经过overLoad函数来拍卖该节点的职位。
其它在该函数的末梢,作者设置了一个调整滑动速度的trick,通过对函数的节流,幸免不常候,乞求过慢,客户重复发送伏乞,形成能源浪费。
接下来,这一片段也足以告一段落了。
4、响应式
谈起底一片段便是响应式了,
那部分,也一流轻便,只要您封装性做的好,其实这一有个别就是加上叁个resize事件就over了。我们后续找入口函数。

 var resize = (function() {
   var flag;
   return function(fn) {
    clearTimeout(flag);
    flag = setTimeout(function() { //函数的节流,防止用户过度移动
     fn();
     console.log("ok")
    }, 500);
   }
})();

同样,这里运用到了函数节流的思虑,要驾驭,作为三个程序猿,永恒不要以为客户 干不出什么 傻事.
比方,没事的时候拖着浏览器窗口玩,放大,降低,再放大…
其实,那事笔者时时干,因为未有女对象,写代码写累了,就拖浏览器玩。
所以,思量到咱们光棍的要求,使用函数节流是非常有须要的。
感兴趣的童鞋,能够参照作者近些日子的篇章,进行学习。
说澳优下,这里的回调函数指的正是init函数,不过要求对init做些改造。详见。

 var update = function(ele) { //当resize的时候,重新设置
  ele.style.position = "initial";
 }
 //初始化时执行函数
 var init = function() {
   var pins = $(".pin"),
    col = columns();
   arrHeight = []; //清空高度
   setCenter(); //设置包裹容器的宽度
   for (var i = 0, pin; pin = pins[i]; i++) {
    if (i < col) { //存储第一排的高度
     arrHeight.push(pin.offsetHeight);
     update(pin);
    } else {
     overLoad(pin); //将元素的位置重排
    }
   }
  }

上边供给步入update,对新的首先排成分进行更新。
下一场就能够直接搬过来使用就能够。
那正是纯属是布局的绝大非常多内容了,关于javascript瀑布流另一种布局方式请参照他事他说加以考察下一篇小说《详解javascript实现瀑布流列式布局》。

正文实例叙述了javascript瀑布流布局落成格局。分享给大家供我们参照他事他说加以考察,具体如下:

图片 3

您大概感兴趣的小说:

  • js完毕的玉女瀑布流效果代码
  • javascript自适应宽度的瀑布流完成思路
  • 纯js达成瀑布流表现照片(自动适应窗口大小)
  • 深入分析瀑布流布局:JS+相对固定的完结
  • js落成瀑布流的一种简单方法实例分享
  • js完成仿百度瀑布流的艺术
  • 原生JS完成响应式瀑布流布局
  • 原生JavaScript完毕瀑布流布局
  • 基于JavaScript实现瀑布流布局

本文介绍了 javascript瀑布流列式布局
的连锁内容,分享给咱们供大家参照他事他说加以考察,具体内容如…

您或许感兴趣的稿子:

  • 基于JavaScript达成瀑布流布局(二)
  • 基于JavaScript达成瀑布流布局
  • 原生JavaScript完结瀑布流布局
  • 原生JS达成美图瀑布流布局赏析
  • 原生JS落成响应式瀑布流布局
  • 浅析瀑布流布局:JS+相对牢固的贯彻
  • js达成瀑布流的三种办法相比较
  • js达成仿百度瀑布流的诀要
  • javascript兑现瀑布流自适应蒙受的标题及实施方案

本文实例呈报了javascript瀑布流布局完成格局。分享给我们供大家参谋,具体如下:
html结构…

您也许感兴趣的小说:

  • js落成的月宫仙子瀑布流效果代码
  • javascript自适应宽度的瀑布流落成思路
  • 纯js达成瀑布流表现照片(自动适应窗口大小)
  • 深入分析瀑布流布局:JS+相对固定的实现
  • js实现瀑布流的一种简易方法实例分享
  • 原生JavaScript+LESS完毕瀑布流
  • 原生JS达成响应式瀑布流布局
  • 原生JavaScript完结瀑布流布局
  • 基于JavaScript实现瀑布流布局
  • 基于JavaScript达成瀑布流布局(二)

瀑布流也理应算是流行几年了吗。首先是由Pinterest掀起的风潮,然后国内设计如雨后苦笋…

html结构:

JS原理

<div id="waterfall">
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
  <div class="mod-box">
    <div class="mod-img">...</div>
  </div>
</div>

上边说了,列式布局大约算是完虐相对式布局. 相对式布局,差不离就好像10元/天
的搬砖工。而列式布局就是站在那看她搬砖的首席营业官。
同样都以搬砖的,多个卖苦力,多少个秀智力商数。几乎了!!!
听了逼逼,大家来面临一下费力的人生。
列式布局的规律其实和绝对式布局尚未太大的却别。
平等也可以有3个部分, 一是页面加载自适应,二是滑动加载,三是响应式布局。
个别授课:

css样式表:

1、加载自适应

*{margin:0;padding: 0}
#waterfall{position: relative;}
.mod-box{
  padding: 15px 0 0 15px;
  float: left;
}
.mod-img{
  padding: 9px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  position: relative;
}
.mod-img img{
  width: 310px;
  height: auto;
}

咱俩先看一下代码吧:

javascript代码:

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;
    }
})();
window.onload = function(){
   waterFall("waterfall","mod-box");
}
window.onscroll = scroll;
window.onresize = function() {
  if(re)clearTimeout(re);
  var re = setTimeout(function() {
  waterFall("waterfall","mod-box");
   }, 200);
}
var dataInit = {
  "data": [
    {
      "src": "5.jpg"
    },
    {
      "src": "6.jpg"
    }
   ]
  };
/**
 * 滚动添加数据函数
 */
function scroll(){
 var flag = checkScroll("waterfall","mod-box");
 if(flag ){
   var oparent = document.getElementById("waterfall");
   var htmlStr = "";
   var len = dataInit.data.length;
   for(var i=0;i<len;i++){
     htmlStr+=""; //需要插入的结构
   }
   oparent.innerHTML+=htmlStr;
   waterFall("waterfall","mod-box"); //重新调用一次
 }
}
/**
 * 瀑布流函数
 * @param parentID 容器id
 * @param clsName 数据块className
 */
function waterFall(parentID,clsName){
  var oParent = document.getElementById(parentID); // 父级对象
  //将content下所有class为mod-box的元素取出来
  var oBoxs = getObjsByClassName(oParent,clsName);// 获取存储块框clsName的数组oBoxs
  var oBoxWidth = oBoxs[0].offsetWidth;  //obox的宽 ==>310+9*2+2+15 = 345(包含边框和内边距) 一个块框的宽
  var pageWidth = document.documentElement.clientWidth; //页面可视宽度
  //var pageWidth = document.documentElement.offsetWidth; //页面可视宽度
  var cols = Math.floor(pageWidth/oBoxWidth); //计算整个页面显示的列数(页面宽/obox的宽)每行中能容纳的mod-box个数
  var hAarr = []; //用于存储 每列中的所有块框相加的高度。
  var minH;   
  var minHIndex;    //最小高度对应的索引值
  for(var i = 0;i<oBoxs.length;i++){//遍历数组aPin的每个块框元素
    oBoxs[i].style.position="absolute";
    if(i<cols){ //把第一行排放好,并将每一列的高度记入数据hAarr
      hAarr.push(oBoxs[i].offsetHeight);
      oBoxs[i].style.top=0+"px";
      oBoxs[i].style.left=oBoxWidth*i+"px";
    }else{
      minH = Math.min.apply(null,hAarr); //数组hAarr中的最小值minH
      minHIndex = getMinhIndex(hAarr,minH);
      oBoxs[i].style.top=minH+"px";
      // oBoxs[i].style.left=oBoxWidth*minHIndex+"px";
      oBoxs[i].style.left= oBoxs[minHIndex].offsetLeft+"px";
      //数组 最小高元素的高 + 添加上的aPin[i]块框高
      hAarr[minHIndex]+=oBoxs[i].offsetHeight; //更新添加了块框后的列高
    }
  }
  var maxH = Math.max.apply(null,hAarr);
  oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; //设置父级居中样式:定宽+自动水平外边距
}
/**
 * 检查是否符合加载数据(滚动到最后一个oBox)
 * @param parentID 容器id
 * @param clsName 数据块className
 * @returns {boolean}
 */
function checkScroll(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  var oBoxs = getObjsByClassName(parentObj,clsName);
  var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
  //创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
  var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
  //标准模式与混杂模式
  var height = document.documentElement.clientHeight; //页面高度
  return (lastBoxH<scrolltop+height)?true:false;
}
/**
 * 根据class获得元素
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
  var parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
  if(!parentObj){
    return;
  }
  var childObjs = parentObj.getElementsByTagName("*"); //获取 父级的所有子集
  var calssObjs = []; //创建一个数组 用于收集子元素
  for(var i in childObjs){//遍历子元素、判断类别、压入数组
    if(childObjs[i].className==clsName){ 
      calssObjs.push(childObjs[i]);
    }
  }
  return calssObjs;
}
/**
 * 获取最小值的索引minIndex
 * @param arr
 * @param minH
 * @returns {string}
 */
function getMinhIndex(arr,minH){
  for(var i in arr){
    if(arr[i]===minH){
      return i;
    }
  }
}

眼见多少个主次,先找他的入口函数,显著,一开头应该是onload,那么,观看onload函数.
能够窥见,里面一共有4个函数.
鉴于客户的小幅度不鲜明,所以我们的列数亦不是自然的。那时候,就供给获得实际尺寸然后举办三个计算才行。然后必要对原来的数据,进行重排。
为此,getHtml正是来赢得一开头的固有数据(innerHTML);
接下来就足以更具宽度来增多列了。
createCol函数便是更具宽度来加多列的。
那时,大家必要叁个数组(arrHeight)来保存每列的高(暗许都为0).
然后就足以开展页面重排=>reloadImg(arrHtml), arrHtml正是原有数据。
好,大家这里初级搬砖完毕。
接下去,是要从头加固了。

更加多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript切换特效与本领总计》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调节工夫总括》、《JavaScript扩充技艺总计》及《JavaScript运动功能与本事汇总》

2、滑动加载

瞩望本文所述对大家JavaScript程序设计有所帮忙。

以此理应算是小编一贯copy过来的,所以说,函数写的好,重用性也是棒棒哒。

你或然感兴趣的稿子:

  • 原生js完成瀑布流布局
  • 深刻学习js瀑布流布局
  • 纯js完毕瀑布流布局及ajax动态新增扩张少
  • 基于JavaScript达成瀑布流布局(二)
  • 基于JavaScript完成瀑布流布局
  • 原生JavaScript完结瀑布流布局
  • 原生JS达成美图瀑布流布局赏析
  • 原生JS实现响应式瀑布流布局
  • 剖判瀑布流布局:JS+绝对一定的兑现
  • JavaScript瀑布流布局达成代码

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瀑布流有所援助。

你只怕感兴趣的小说:

  • js达成的仙子瀑布流效果代码
  • javascript自适应宽度的瀑布流达成思路
  • 纯js达成瀑布流表现照片(自动适应窗口大小)
  • 浅析瀑布流布局:JS+相对定点的落到实处
  • js完成瀑布流的一种简易方法实例分享
  • js完成仿百度瀑布流的措施
  • 原生JS达成响应式瀑布流布局
  • 原生JavaScript达成瀑布流布局
  • 基于JavaScript完成瀑布流布局

相关文章