首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现瀑布流布局

- Author -

Superpan2015

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
微信小程序 授权登录详解（附完整源码）
Aug 23 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 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
耳机(1) 66-XI(1) BOSE(2) 收信机(3) 晶体管(2) 77A(2) MOTOROLA(1) 摩托罗拉(1) ICF-2010(1) 音箱(1)
You might like
玩转虚拟域名◎＋ .
2006/10/09 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
js一组验证函数
2008/12/20 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
微信小程序分享小程序码的生成（带参数）以及参数的获取
2020/03/25 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python实现简易通讯录修改版
2018/03/13 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
PHP面试题-$message和$$message的区别
2015/12/08 面试题
毕业自我评价范文
2013/11/17 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
教师自荐信
2013/12/10 职场文书
中班开学寄语
2014/04/04 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
应届毕业生自荐信
2014/05/28 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
python编程实现清理微信重复缓存文件
2021/11/01 Python