JS实现瀑布流布局


Posted in Javascript onOctober 21, 2017

本文实例为大家分享了JS实现瀑布流布局展示的具体代码,供大家参考,具体内容如下

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流布局</title>
  <script src="wallpoll.js"></script>
  <link rel="stylesheet" href="wallpoll.css" rel="external nofollow" >
</head>
<body>
  <div id="main">
    <div class="box">
      <div class="pic">
        <img src="wallpoll/0.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/0.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/1.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/2.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/3.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/4.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/5.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/6.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/7.jpg" alt="">
      </div>
    </div>

    <div class="box">
      <div class="pic">
        <img src="wallpoll/8.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/9.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/10.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/11.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/12.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/13.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/14.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/15.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/16.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/17.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/18.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/19.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/20.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/21.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/22.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/23.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="pic">
        <img src="wallpoll/24.jpg" alt="">
      </div>
    </div>
  </div>
</body>
</html>

css部分

*{
  padding:0px;
  margin:0px;
}
.main{
  position:relative;
}
.box{
  padding:15px 0 0 10px;
  float:left;
}
.pic{
  padding:10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  /*float:left;*/
}
img{
  width:170px;
  height:auto;
}

JS部分

window.onload=function(){
  waterfall('main','box');
  var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}
  window.onscroll=function(){
    if(checkScrollSlide){
      for(var i=0;i<dataInt.data.length;i++){
        var oparent=document.getElementById("main");
        var box=document.createElement("div");
        box.className="box";
        oparent.appendChild(box);
        var pic=document.createElement("div");
        pic.className="pic";
        box.appendChild(pic);
        var img=document.createElement("img");
        img.src="wallpoll/"+dataInt.data[i].src;
        pic.appendChild(img);
      }
    }
    waterfall('main','box');
  }
}
function waterfall(parent,child){
  var oparent=document.getElementById(parent);
  var boxs=oparent.getElementsByClassName(child);
  var boxw=boxs[0].offsetWidth;
  var cols=Math.floor(document.documentElement.clientWidth/boxw);
  oparent.style.cssText="width:"+cols*boxw+"px;margin:0 auto";
  var harr=new Array();
  for(var i=0;i<boxs.length;i++){
    if(i<cols){
      harr.push(boxs[i].offsetHeight);
     }else{
      var minH=Math.min.apply(null,harr);
      var index=getMinhIndex(harr,minH);
      boxs[i].style.position="absolute";
      boxs[i].style.top=minH+"px";
      boxs[i].style.left=boxs[index].offsetLeft+"px";
      harr[index]+=boxs[i].offsetHeight;
    }
  }
}
function getMinhIndex(arr,val){
  for(var i in arr){
    if(arr[i]===val){
      return i;
    }
  }
}
function checkScrollSlide(){
  var oparent=document.getElementById("main");
  var boxs=oparent.getElementsByClassName("box");
  var lastBox=boxs[boxs.length-1];
  var height=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);
  var scrollHeigth=document.documentElement.scrollTop || document.body.scrollTop;
  // console.log(scrollHeigth);
  var seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth;
  return seeHeigth+scrollHeigth>height?true:false;
}

课程地址。

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

Javascript 相关文章推荐
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
简单实现js页面切换功能
Jan 10 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
用js简单提供增删改查接口
May 12 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
js实现Tab选项卡切换效果
Jul 17 #Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 #Javascript
js注册时输入合法性验证方法
Oct 21 #Javascript
angular4实现tab栏切换的方法示例
Oct 21 #Javascript
js Dom实现换肤效果
Oct 21 #Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 #Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 #Javascript
You might like
php模板原理讲解
2013/11/13 PHP
PHP异常处理Exception类
2015/12/11 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
深入理解python中的atexit模块
2017/03/07 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
基于python中__add__函数的用法
2019/11/25 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
党员干部形式主义个人整改措施
2014/09/17 职场文书
政风行风整改报告
2014/11/06 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python