原生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 面向对象 继承
May 13 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
node.js入门学习之url模块
Feb 25 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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下的PHP5.0安装配制详解
2006/09/05 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
办理护照工作证明
2014/10/10 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android