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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
基于游标的分页接口实现代码示例
Nov 12 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
php读取文件内容的方法汇总
2015/01/24 PHP
php微信开发之关注事件
2018/06/14 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
列表内容的选择
2006/06/30 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
Javascript基础教程之数据类型转换
2015/01/18 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
详细探究Python中的字典容器
2015/04/14 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python变量命名的7条建议
2019/07/04 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
介绍一下如何优化MySql
2016/12/20 面试题
中国梦读书活动总结
2014/07/10 职场文书
大学生党性分析材料
2014/12/19 职场文书
家属慰问信
2015/02/14 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis