原生js实现瀑布流布局


Posted in Javascript onMarch 08, 2017

用js实现瀑布流布局以及通过模拟的数据加载图片,已标记注释

效果如图:

原生js实现瀑布流布局

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>瀑布流布局-JS实现</title>
</head>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #main{
    position: relative;/*整体相对定位,因为每个小图片盒子的位置是通过计算再由绝对定位放置,是需要相对于main盒子*/
  }
  .box{
    padding: 15px 0 0 15px;/*padding为内边距,后面js获取的高度包括padding的距离*/
    float: left;
  }
  .pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
  }
  .pic img{
    width: 165px;
    height: auto;
  }
</style>
<script type="text/javascript">
  window.onload=function(){
    var oParent=document.getElementById("main");
    var oBoxs=oParent.getElementsByClassName("box");
    waterfall('main','box');//调用瀑布布局的函数
    var dataInt={"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]}//模拟出要加载的图片
    window.onscroll=function(){
      if(checkscrollSlide()){//如果调用函数的返回结果为true
        //将数据块渲染到当前页面底部
        for(var i=0;i<dataInt.data.length;i++){//dataInt对象的data属性的长度
          var oBox=document.createElement('div');
          oBox.className='box';
          oParent.appendChild(oBox);//添加到父元素的最后
          var oPic=document.createElement('div');
          oPic.className='pic';
          oBox.appendChild(oPic);
          var oImg=document.createElement('img');
          oImg.src="img/"+dataInt.data[i].src;
          oPic.appendChild(oImg);
        }
        waterfall('main','box');
      };
    }
    function waterfall(parent,box){
      var oParent=document.getElementById(parent);
      var oBoxs=oParent.getElementsByClassName(box);
      var oBoxW=oBoxs[0].offsetWidth;//计算每个box的宽度
      //计算整个页面显示的列数(页面宽/box的宽)
      var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
      //设置main的宽,居中
      oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';
      var hArr=[];//存放每一列高度的数组
      for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
          hArr.push(oBoxs[i].offsetHeight);//将第一行的各个高度加到数组中
        }else{
          var minH=Math.min.apply(null,hArr);//apply方法可以改变数组的指向,因为Math.min方法不支持数组
          var index=getMinhIndex(hArr,minH);
          oBoxs[i].style.position='absolute';
          oBoxs[i].style.top=minH+'px';
          oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
          hArr[index]+=oBoxs[i].offsetHeight;
        }
      }
    }
    function getMinhIndex(arr,val){
      for(var i in arr){
        if(arr[i]==val){
          return i;
        }

      }
    }
    //检测是否具备了滚动条加载数据块的条件
    function checkscrollSlide(){
      //最后一个盒子的距顶部的高度加上自身高度的一半
      var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+ Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
      //页面滚走的距离
      var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
      //当前浏览器窗口可视区域高度
      var height=document.body.clientHeight||document.documentElement.clientHeight;
      return (lastBoxH<scrollTop+height) ? true : false;
    }
}


</script>
<body>
<div id="main">
  <div class="box">
  <div class="pic">
    <img src="img/0.jpg" />
  </div>
</div>
  <div class="box">
    <div class="pic">
      <img src="img/1.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/2.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/3.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/4.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/5.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/6.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/7.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/8.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/9.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/10.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/11.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/12.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/13.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/14.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/15.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/16.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/17.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/18.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/19.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/20.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/21.jpg" />
    </div>
  </div>
  <div class="box">
    <div class="pic">
      <img src="img/22.jpg" />
    </div>
  </div>

</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
Node.js实现发送邮件功能
Nov 06 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 #Javascript
JavaScript中的工厂函数(推荐)
Mar 08 #Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 #Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 #Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 #Javascript
原生js实现选项卡功能
Mar 08 #Javascript
js, jQuery实现全选、反选功能
Mar 08 #Javascript
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
提高网站信任度的技巧
2008/10/17 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
python中类的一些方法分析
2014/09/25 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
学校消防演习方案
2014/02/19 职场文书
春节晚会主持词
2014/03/24 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
学习张林森心得体会
2014/09/10 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL