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错误的认识不用关心内存管理
Dec 15 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JScript中的条件注释详解
Apr 24 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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之apc
2013/05/15 PHP
php curl的深入解析
2013/06/02 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
wxpython布局的实现方法
2019/11/01 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python随机模块random使用方法详解
2020/02/14 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
会计岗位职责
2013/11/08 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
给医务人员表扬信
2014/01/12 职场文书
课外小组活动总结
2014/08/27 职场文书
食品安全演讲稿
2014/09/01 职场文书
给领导的感谢信范文
2015/01/23 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Redis 哨兵集群的实现
2021/06/18 Redis