纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果，初步实现一个基本的瀑布流布局，以及滚动到底部后模拟ajax数据加载新图片功能。
缺点：
1. 程序不是响应式，不能实时调整页面宽度；
2. 程序中当新增ajax模拟数据图片后，是将整个页面的所有图片都重新定位一次。
3. 程序是等所有图片加载完成后再读取图片的尺寸，实际中肯定不能这样做。
4. 实际项目中，应该由后台程序给出图片尺寸值，在js代码中直接使用图片的width属性。
本程序思路：
html结构：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<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. 所有新增图片添加完成后，对整个页面的所有图片及布局重新执行步骤一的初始化操作。
项目文件夹：
index.html: 预先置入部分图片数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
<!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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
*{
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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
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;
}
|
转载于:https://www.cnblogs.com/firstdream/p/5497542.html
纯js实现瀑布流布局及ajax动态新增数据相关推荐
- JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- Python爬虫4.2 — ajax(动态网页数据抓取)用法教程
Python爬虫4.2 - ajax[动态网页数据]用法教程 综述 AJAX 介绍 什么是AJAX 实例说明 请求分析 获取方式 实例说明 其他博文链接 综述 本系列文档用于对Python爬虫技术的学 ...
- Echarts3通过ajax动态获取数据，30秒定时图表数据,设置图表线条颜色和粗细
Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细 代码块 <!DOCTYPE html> <head><meta charset=&q ...
- ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
- JS实现瀑布流布局（动态新增数据）
本文旨在用JS写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,在页面滚动到底部后模拟ajax数据加载新图片功能. 实现思路: 1.首先对第一行图片进行布局,提取出高度最小一列的高度. 2.第二行开 ...
- 纯 js 让浏览器不缓存 ajax 请求
开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态. 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为 ...
- jsp ajax动态添加数据,jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值 ...
- python爬虫抓取动态网页数据_python网络爬虫抓取ajax动态网页数据：以抓取KFC门店地址为例...
一,尝试用BeautifulSoup抓取 先打开KFC网站门店列表页面:http://www.kfc.com.cn/kfccda/storelist/index.aspx 可以看到门店列表如下图: 打 ...
- js post中文乱码 php,AJAX之POST数据中文乱码如何解决
本文主要和大家分享AJAX之POST数据中文乱码如何解决,前端使用encodeURI进行编码,希望能帮助到大家.var param = encodeURI(param); $.ajax({ url: ...
最新文章
- BufferedInputStream的read方法原理
- 51单片机c语言数字输入输出,第五章 51单片机C语言程序--输入输出接口.pdf
- PHP----------安装包lnmp1.3-full安装的lnmp环境，如何安装PHP扩展
- 【安装包】eclipse
- 鸟哥的linux私房菜 第五章
- Google Guava中Joiner用法
- js获取某年某月某天是一年中的第几周
- a标签实现下载图片功能
- Android中Home键的监听和拦截
- [收集编辑]管理故事216则
- 作业之安装Python
- 一文读懂开源项目 OpenHarmony2.0 开源项目 OpenHarmony 是什么
- 车祸相关公开数据集（免费下载）
- 【Python】时间序列分析
- xfs文件系统恢复工具xfs_undelete
- dodo：人脸识别方法个人见解
- Outlook邮箱设置多个别名
- 南京大学主动拒绝世界大学排名
- 学习日志0820类的继承
- excel 置信区间 计算_如何用excel计算95%的置信区间
热门文章
- finereport字段显示设置_如何在Excel中显示和编辑中文拼音字段
- 西贝莜面村员工手册_西贝那达慕草原美食节 引领文化生活新消费
- informatica数据脱敏_助您首个大数据项目破茧成蝶的实践指南
- 自动化构建部署之Jenkins安装【Docker容器】
- input在type=number时去右边上下箭头
- 下列哪个不是python元组的定义方式_Python基础知识笔试
- Qt工作笔记-QGraphics框架场景中图元的移除与析构
- qt + opencv249配置转+续写
- ie8 ajax访问不了https,ie8不支持https协议的api接口么
- linux grub2 修复,Ubuntu 10.04修复GRUB2