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


Posted in Javascript onFebruary 17, 2016

本文实例讲述了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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
javascript实现yield的方法
Nov 06 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
给angular加上动画效遇到的问题总结
Feb 17 #Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 #Javascript
jQuery实现伪分页的方法分享
Feb 17 #Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 #Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 #Javascript
纯JavaScript代码实现文本比较工具
Feb 17 #Javascript
JavaScript实现身份证验证代码
Feb 17 #Javascript
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vue组件间通信子与父详解(二)
2017/11/07 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python制作exe文件简单流程
2019/01/24 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
简单的命令查看安装的python版本号
2020/08/28 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
任课老师推荐信范文
2013/11/24 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
工作时间上网检讨书
2014/02/03 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
工业设计专业自荐书
2014/06/05 职场文书
写给领导的感谢信
2015/01/22 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
绿里奇迹观后感
2015/06/15 职场文书
小型婚礼主持词
2015/06/30 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技