纯js实现瀑布流布局及ajax动态新增数据
作者:WoodK 发布时间:2023-08-08 07:11:23
本文用纯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. 所有新增图片添加完成后,对整个页面的所有图片及布局重新执行步骤一的初始化操作。
项目文件夹:
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+html5实现canvas绘制镂空字体文本的方法。分享给大家供大家参考。具体实现方法如下:<!DOCTYPE ht
- Python作为一门脚本语言,经常作为脚本接受命令行传入参数,Python接受命令行参数大概有三种方式。因为在日常工作场景会经常使用到,这里
- JDBC,Java Database Connectivity,即 Java 数据库连接。实际上 JDBC 是 Java 中的一套和数据库进
- 因为要将js的一个签名算法移植到python上,遇到一些麻烦。int无限宽度,不会溢出算法中需要用到了32位int的溢出来参与运算,但是py
- 1. 列表1.1 复制浅拷贝list_1 = [1, [22, 33, 44], (5, 6, 7), {"name":
- 装饰器对与Python新手以至于熟悉Python的人都是一个难理解, 难写的东西. 那么今天就分享一下我对Python 装饰器的理解所谓装饰
- 那怎么开始设计一个合格的类呢,一开始就写class{}的都错了,正确的是什么都不写,而是假设这个类已经存在,这个对象已经存在,各种属性方法都
- 学习Python网络通信的时候发现书上只有一个服务端对应一个客户端的情形,于是自己想自己动手实现一个服务端响应多个客户端。首先建立服务器的s
- keras 深度学习框架中get_value函数运行越来越慢,内存消耗越来越大问题问题描述如上图所示,经过时间和内存消耗跟踪测试,发现是ke
- 一、网络请求在uni中可以调用uni.request方法进行请求网络请求需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名
- 引文: 长期以来,多媒体信息在计算机中都是以文件形式存放,由操作系统管理的,但是随着计算机网络,分布式计算的发展,对多媒体信息进行高效的管理
- 前言异步函数也是有执行顺序的。本质上来说,JavaScript是单线程语言,不管是在浏览器中还是nodejs环境下。浏览器在执行js代码和渲
- 1.Beautiful Soup库简介Beautiful Soup 简称 BS4(其中 4 表示版本号)是一个 Python 中常用的页面解
- 场景:有一个多层嵌套的列表如:[[23],[3,3],[22,22],1,123,[[123,a],2]] 拆分成:def splitlis
- 公司技术背景:数据库访问类(xxx.DataBase.Dll)调用存储过程实现数据库的访问。技术方案一:压缩时间下程序员写出的第一个版本,仅
- 本文实例讲述了Python设计模式之备忘录模式原理与用法。分享给大家供大家参考,具体如下:备忘录模式(Memento Pattern):不破
- 本文实例讲述了Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)。分享给大家供大家参考,具体
- 最近网上流行着一些采集程序,更多人拿着这些东西在网上叫卖,很多不太懂的人看着那些程序眼羡,其实如果你懂一些ASP,了解自动采集程序的原理后,
- inspect模块用于收集python对象的信息,可以获取类或函数的参数的信息,源码,解析堆栈,对对象进行类型检查等等,有几个好用的方法:D
- 问题重述实习项目要做安全帽目标检测,拿到了公司给的一些视频数据,使用Opencv读取视频并每隔 1 s 1s 1s存储一副图像,下面是一些视