JavaScript实现瀑布流布局


Posted in Javascript onJune 28, 2020

本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下

效果图:

JavaScript实现瀑布流布局

具体代码:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
 <div id="container">
  <div class="box">
    <div class="box_img"> <img src="images/1.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/2.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/3.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/4.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/5.jpg" alt=""></div>
  </div>
 <div class="box">
    <div class="box_img"> <img src="images/6.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/7.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/8.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/9.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/10.jpg" alt=""></div>
  </div>

  <div class="box">
    <div class="box_img"> <img src="images/1.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/2.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/3.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/4.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/5.jpg" alt=""></div>
  </div>
 <div class="box">
    <div class="box_img"> <img src="images/6.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/7.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/8.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/9.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/10.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/1.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/2.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/3.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/4.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/5.jpg" alt=""></div>
  </div>
 <div class="box">
    <div class="box_img"> <img src="images/6.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/7.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/8.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/9.jpg" alt=""></div>
  </div>
  <div class="box">
    <div class="box_img"> <img src="images/10.jpg" alt=""></div>
  </div>


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

CSS代码:

*{
  margin: 0px;
  padding: 0px;
}

#container{
  position: relative;
}

.box{
  padding: 5px;
  float: left;
}
.box_img{
  padding: 5px;
  border: 1px solid #cccccc;
  box-shadow: 0 0 5px #ccc;
  border-radius: 5px;
}

.box_img img{
  width: 150px;
  height:auto;
}

js代码:

window.onload=function(){
  imgLocation("container","box");
  var imgData={
   "data":[
    {"src":"2.jpg"},
    {"src":"3.jpg"},
    {"src":"4.jpg"},
    {"src":"5.jpg"},
    {"src":"6.jpg"},
    {"src":"7.jpg"},
    {"src":"8.jpg"},
   ]
  };
  window.onscroll=function(){
  if (checkFlag()) {
   var cparent=document.getElementById("container");
   for (var i = 0; i < imgData.data.length; i++) {
     var ccontent=document.createElement("div");
     ccontent.className="box";
     cparent.appendChild(ccontent);
     var boximg=document.createElement("div");
     boximg.className="box_img";
     ccontent.appendChild(boximg);
     var img=document.createElement("img");
     img.src="images/"+imgData.data[i].src;
     boximg.appendChild(img);
   } 
    imgLocation("container","box");
  }
  }
}

function checkFlag(){
  var cparent=document.getElementById("container");
  var ccontent=getChildnode(cparent,"box");
  var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
  if (lastContentHeight<scrollTop+pageHeight) {
  return true;
  }
}
function imgLocation(parent,content){
   var cparent=document.getElementById(parent);
   var ccontent=getChildnode(cparent,content);
   var imgWidth=ccontent[0].offsetWidth;
   var cols=Math.floor(document.documentElement.clientWidth/imgWidth);
   cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";

  //把第二排的左起第一张图片放到第一排高度最小的那张下面
   var imgHeightArr=[];
   for (var i = 0; i < ccontent.length; i++) {
    if (i<cols) {
      imgHeightArr[i]=ccontent[i].offsetHeight;     
    }else{
      var minHeight=Math.min.apply(null,imgHeightArr);
      var minHeightIndex=getMinHeightLoc(imgHeightArr,minHeight);
      console.log("minHeightIndex"+minHeightIndex);
   ccontent[i].style.position="absolute";
   ccontent[i].style.top=minHeight+"px";
   ccontent[i].style.left=ccontent[minHeightIndex].offsetLeft+"px";
   imgHeightArr[minHeightIndex]=imgHeightArr[minHeightIndex]+ccontent[i].offsetHeight;
    console.log(imgHeightArr[i]);
    console.log("高度最低:"+minHeight);
    }

  }

}

function getChildnode(parent,content){
  var contentArr=[];
  var allcontent=parent.getElementsByTagName("*");
 for (var i = 0; i < allcontent.length; i++) {
  if(allcontent[i].className==content){
   contentArr.push(allcontent[i]);
  }
 };

 return contentArr;
}

function getMinHeightLoc(imgHeightArr,minHeight){
  for(var i in imgHeightArr){
   if (imgHeightArr[i]==minHeight) {
    return i;
   }
  }
}

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
javascript之ESC(第二类混淆)
May 06 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
js中的面向对象入门
Mar 06 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
React组件refs的使用详解
Feb 09 Javascript
vue发送ajax请求详解
Oct 09 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
轻松实现JavaScript图片切换
Jan 12 #Javascript
jQuery动画效果图片轮播特效
Jan 12 #Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 #Javascript
jqueryMobile使用示例分享
Jan 12 #Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 #Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 #Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 #Javascript
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP调用其他文件中的类
2018/04/02 PHP
sina的lightbox效果。
2007/01/09 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
python中Flask框架简单入门实例
2015/03/21 Python
python中反射用法实例
2015/03/27 Python
python实现简单遗传算法
2018/03/19 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Django 外键的使用方法详解
2019/07/19 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
国际贸易实训总结
2015/08/03 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server