时间:2021-05-18
本文用纯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:
效果图:
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfallDemo:ht
本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下1.实现瀑布流布局思路准备好数据之后.绑定滚动事件.判断页面是否到底(滚动的距离+可是
本文实例为大家分享了JS实现瀑布流布局展示的具体代码,供大家参考,具体内容如下html部分瀑布流布局css部分*{padding:0px;margin:0px;
这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户。这款流布局JS插件仅有4KB的
本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下原理:1、瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到