纯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 实现的全选和反选
Apr 15 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
原生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
PHP MSSQL 存储过程的方法
2008/12/24 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php实现Session存储到Redis
2015/11/11 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python简单实现获取当前时间
2016/08/27 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
高中数学教学反思
2014/01/30 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
文明之星事迹材料
2014/05/09 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
员工旷工检讨书
2015/08/15 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL