纯js实现瀑布流布局及ajax动态新增数据


Posted in Javascript onApril 07, 2016

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能。

缺点:

1. 程序不是响应式,不能实时调整页面宽度;

2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次。

3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做。

4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性。 

本程序思路:

html结构:

<body>
 <div id="container">
  <div class="box">
   <div class="box_img">
    <img src="img/1.jpg" />
   </div>
  </div>
  <div class="box">
   <div class="box_img">
    <img src="img/2.jpg" />
   </div>
  </div>
  ...
 </div>
</body>

一、初始化布局

1. 设置#container为position:relative;

2. 设置.box为float:left;

3. 网页加载后对所有图片进行定位;

3.1 图片宽度是固定的,计算出当前页面每行能容纳的图片数num,并得出#container的宽度,然后设置页面居中;

3.2 循环遍历所有图片,前num个图片默认float布局作为第一行,并存入数组BoxHeightArr = [];

3.3 第一行布局完成后,排布下一个图片,并更新BoxHeightArr[]:

3.3.1 将下一个图片放到第一行最矮图片的下方(用position:absolute定位),也就是BoxHeightArr[]中高度最小的那一列,记录下列数的索引值:minIndex;

3.3.2 更新BoxHeightArr[]中最小的那个值(BoxHeightArr[minIndex]+当前图片的高度);

3.4 重复循环3.3步骤,直到所有图片都排布完成

二、实时监测滚动高度,是否要加载新数据

1.初始化完成后得到最后一个图片距离顶部的高度: lastContentHeight

2.用window.onscroll = function(){...}

实时监测当前页面的滚动高度为:scrollTop

实时监测当前页面视窗高度为:pageHeight

3. 当页面监测到:lastContentHeight < scrollTop + pageHeight 时,用ajax获取新增图片的json数据。

三、页面底部新增内容

1. 用一个循环,先创建一个新的图片容器,添加到底部,然后将json数据中相应的图片数据如路径等信息写入该容器完成添加图片。

2. 所有新增图片添加完成后,对整个页面的所有图片及布局重新执行步骤一的初始化操作。

 项目文件夹:

纯js实现瀑布流布局及ajax动态新增数据

index.html: 预先置入部分图片数据

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

style.css:

*{
 margin: 0;
 padding: 0;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
}
.box_img{
 padding: 5px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 150px;
 height: auto;
}

app.js:

window.onload = function(){
 imgLocation("container", "box");
 //ajax模拟数据
 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]}
 
 window.onscroll = function(){
 if(checkFlag()){ //判断是否到底部要加载新的数据
  var cparent = document.getElementById("container");
  //把ajax数据加载进页面
  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 = "img/"+imgData.data[i].src;
  boximg.appendChild(img);
  }
  //把所有图片数据重新定位一次
  imgLocation("container", "box");
 }
 }
};

function checkFlag(){
 var cparent = document.getElementById("container");
 var ccontent = getChildElement(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;
 console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
 
 if(lastContentHeight < scrollTop + pageHeight){
 return true;
 }
}

function imgLocation(parent, content){
 //将parent下所有的content全部取出
 var cparent = document.getElementById(parent);
 var ccontent = getChildElement(cparent, content);
 //根据当前浏览器窗口的宽度,确定每行图片数并固定,居中
 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border
 var num = Math.floor(document.documentElement.clientWidth / imgWidth);
 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";
 //alert("pause");
 //设置一个数组,用来承载第一行的图片信息
 var BoxHeightArr = [];
 for(var i=0; i<ccontent.length; i++){
 if(i<num){
  //第一行的图片的高度记录下来
  BoxHeightArr[i] = ccontent[i].offsetHeight;
  //当ajax数据加载后,程序是将所有图片重新定位,所以第一行的图片要清除position:absolute
  ccontent[i].style.position = "static";
 }else{
  var minHeight = Math.min.apply(null, BoxHeightArr);
  var minIndex = getminheightLocation(BoxHeightArr, minHeight);
  
  //把图放在第一行图索引值最小的下面
  ccontent[i].style.position = "absolute";
  ccontent[i].style.top = minHeight+"px";
  ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
  
  //图片放好位置后更新“第一行图片信息的最小高度”,
  //然后利用for循环重复这个动作到结束
  BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
 }
 }
;}

//获取第一行图片高度最小的索引值
function getminheightLocation(BoxHeightArr, minHeight){
 for(var i in BoxHeightArr){
 if(BoxHeightArr[i] == minHeight){
  return i;
 }
 }
}

//获取所有box
function getChildElement(parent, content){
 contentArr = parent.getElementsByClassName(content);
 return contentArr;
}

效果图:

纯js实现瀑布流布局及ajax动态新增数据

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JS根据生日算年龄的方法
May 05 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
原生JavaScript实现Ajax的方法
Apr 07 #Javascript
JavaScript数据推送Comet技术详解
Apr 07 #Javascript
js实现商品抛物线加入购物车特效
Nov 18 #Javascript
js类式继承与原型式继承详解
Apr 07 #Javascript
javascript原型继承工作原理和实例详解
Apr 07 #Javascript
浅析JS原型继承与类的继承
Apr 07 #Javascript
AngularJs 弹出模态框(model)
Apr 07 #Javascript
You might like
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery插件制作的实例教程
2016/05/16 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python中的ceil()方法使用教程
2015/05/14 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Python3多线程基础知识点
2019/02/19 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
高三学生评语大全
2014/04/25 职场文书
社区工作者演讲稿
2014/05/23 职场文书
教师个人年终总结
2015/02/11 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
员工年度工作总结2015
2015/05/18 职场文书
小学班长竞选稿
2015/11/20 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
python字典的元素访问实例详解
2021/07/21 Python