0 前言
在我们浏览各大网站，网页，手机APP的时候，可能会遇到很多图片大小不一，看起来杂乱无章，其实，它们是狠有顺序的，排列在一起。这就应用到了网站中一种很流行的页面布局---瀑布流，又称瀑布流布局。
1 简介
瀑布流：又称瀑布流式布局，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动而不断加载。
2 优点
操作简单（滚动鼠标）
节省空间
用户体验好
3 缺点
无限滚动加载模式，页脚就永远加载不出来了。
4 代码实现
4.1 第一步 创建模板
首先你的想好，你想要创建几列，然后在body中创建好模板
<div id="box"> <ul></ul> <ul></ul> <ul></ul> <ul></ul></div>
4.2 第二步 设置css样式
设置写简单的样式，让每个图片之间有点间隙，通俗易懂点就是，让照片更有视觉冲击力，比较有美感。
*{ padding: 0; margin: 0;}#box{ width: 90%; margin: 20px auto;}#box ul{ list-style: none; float: left; width: 24%; margin: 5px;}#box ul img{ width: 100%; margin: 5px;}
4.3 第三步 添加图片
现在就是利用js原生循环创建图片和li。
function createImg (count) { //循环创建 for(var i = 0; i < count; i++) { //创建图片 和 li var img = document.("img"); img.src = "美女/" + i + ".jpg"; var li = document.("li"); li.(img); }}//调用函数createImg(99);
4.4 第四步 怎么把图片添加到ul中
这时候就要想想怎么把图片添加到ul，因为这时候图片大小不一样，如果你依次循环添加到ul中，可能会出现长的图片都在一列，短的都在一列，可能会使中间出现一个大的缺口，那么就会很缺少美感。
所以，我们就可以，每次都找到它的最短的那一列，然后添加到它的后面，不管是谁，只要在添加图片的时候，只要你短，我就在你后面添加的道理。就能有效的避免刚才那种情况的发生了，吼吼，看代码吧......
//获取到所有的ulvar ulArr = document.querySelectorAll("ul");//假设一个最短的ulvar minHeightUl = ulArr[0];//循环找到每次最短的然后添加图片for (var j = 0; j < ulArr.length; j++) { if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) { minHeightUl = ulArr[j]; }}minHeightUl.(li);
4.5 第五步 完成瀑布流之各种型号美女
图片不能太大，要不然上传不了，这就尴尬了......
5 完整代码
就知道有些人按捺不住，我懂你，把完整代码都给你好了吧！！！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 90%; margin: 20px auto; } #box ul{ list-style: none; float: left; width: 24%; margin: 5px; } #box ul img{ width: 100%; margin: 5px; } </style></head><body> <div id="box"> <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div> < type="text/java"> var ulArr = document.querySelectorAll("ul"); function createImg (count) { for(var i = 0; i < count; i++) { //创建图片 和 li var img = document.("img"); img.src = "美女/" + i + ".jpg"; var li = document.("li"); li.(img); //假设一个最短的ul var minHeightUl = ulArr[0]; for (var j = 0; j < ulArr.length; j++) { if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) { minHeightUl = ulArr[j]; } } minHeightUl.(li); } } createImg(99); </></body></html>
6 结束语
看完我写的js瀑布流之各种型号美女，有没有感觉你在喷血啊，哈哈。
推荐阅读
程序员的年终总结 各种版本各种残
为什么干活越少的人钱拿的越多
程序员才是真影帝！看程序员的内心戏！你是这样吗？
破解春运抢票软件原理后 知道的抢票小技巧
微信小程序很强大 但它的野心和它的问题一样明显
程序员用深度学习写了个老板探测器（附源码）
支付宝2016年度账单出炉 炫富大赛开始了
我是如何用前端技术得到XXOO网站VIP的
不开玩笑！99%的人干不了鉴黄师这份工作
小编喵喵个人微信号：itmiao520 懒人回复"喵喵"扫码添加。
点击左下角阅读原文查看更多长知识文章！
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » 模板js(模板JAS认证)
1 评论