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 相关文章推荐
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
JavaScript模块详解
Dec 18 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
vue中关闭eslint的方法分析
Aug 04 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
python web框架学习笔记
2016/05/03 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python3.6的venv模块使用详解
2018/08/01 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python读取Excel表格文件的方法
2019/09/02 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
django实现日志按日期分割
2020/05/21 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
运动会加油稿
2015/07/22 职场文书