瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
实例主体思路是记录每一列的高度，父容器相对定位，成员绝对定位，利用top与left属性控制位置，每次新增加成员时找到高度最低的那个将成员置于其下方，即可实现瀑布流布局。如果不需要动态加入成员，而只是一次性加载供展示用，那么可以考虑使用flex布局将容器设置为flex-direction: column;以及flex-wrap: wrap;并给予容器一个合适的高度来实现，还可以使用CSS3新增的column-*多列布局来实现，这两种也就是纯CSS实现的瀑布流布局的方式，但是由于这两种方式都是将成员纵向排列，并不适合需要动态插入成员的布局，当需要动态插入成员时还是需要使用Js来实现。
<!DOCTYPE HTML><HTML><head> <Title>Js瀑布流布局</Title> <Meta name="vIEwport" content="wIDth=device-wIDth,user-scalable=no,initial-scale=1" /> <style type="text/CSS"> #container{ position: relative; /* 父容器relative */ } .item{ position: absolute; /* 成员设置为absolute */ display: flex; /* 主要为显示字居中 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ color: #fff; /* 字体颜色白色 */ } </style></head><body> <div ID="container"></div></body> <script type="text/JavaScript"> var column = 3; // 制作三列布局 var counter = 0; // 计数器 为显示当前块计数 var columnHeight = Array(column).fill(0); // 记录每列高度 var container = document.getElementByID("container"); // 父容器对象 var colorList = ["#EAA78C","#F9CD82","#9ADEAD","#9CB6E9","#E49D9B","#97D7D7","#ABA0CA","#9F8BEC","#ACA4D5","#6495ED","#7Bcda5","#76B4EF","#E1C38F","#F6C46A","#B19ED1","#F09B98","#87CECB","#D1A495","#89D196","#FE9E9F","#93BAFF","#D999F9","#81C784","#FFCA62","#FFA477"]; // 颜色列表 function random(min=0,max=1) { // 生成随机数 return min + ~~((max-min)*Math.random()) // min <= random < max } function findMinColumn(arr){ // 找到高度最小的列 var min = arr[0]; var index = 0; arr.forEach((v,i) => { if(v < min) { min = v; index = i; } }) return [index,min]; } function appendimg(){ var gap = 3; // 间隙设为3px for(let i=0;i<12;++i){ // 每次加载12个成员 var unit = { height:random(100,500),//随机一个不定高度 wIDth: 300,// 定宽 color: colorList[random(0,colorList.length)] // 随机颜色 } var [minIndex,min] = findMinColumn(columnHeight); // 获取高度最小列以及下标 var d = document.createElement("div"); // 创建一个节点 d.classname = "item"; // 设置class d.style.background = unit.color; // 设置背景颜色 d.style.height = `${unit.height}px`; // 设置宽度 d.style.wIDth = `${unit.wIDth}px`; // 设置宽度 d.style.top = `${min + gap}px`; // 设置上偏移 d.style.left = `${(300 + gap) * minIndex}px`; // 设置左偏移 d.innerText = `${++counter}#${unit.height}X${unit.wIDth}`; // 设置文字 columnHeight[minIndex] += (unit.height+gap); // 更新选中列的高度 container.appendChild(d); // 添加节点 } } function init(){ appendimg(); // 初始加载 var endLoad = columnHeight.some(v => v > window.innerHeight); // 获取是否有某列高度大于屏幕高度 if(!endLoad) init(); // 如果没有则递归调用继续加载 } (function(){ init(); // 打开页面自动加载 })(); window.onscroll = function (){ // 浏览器触底事件 var marginBottom = 0; if (document.documentElement.scrolltop){ var scrollHeight = document.documentElement.scrollHeight; var scrolltop = document.documentElement.scrolltop + document.body.scrolltop; var clIEntHeight = document.documentElement.clIEntHeight; marginBottom= scrollHeight - scrolltop - clIEntHeight; } else { var scrollHeight = document.body.scrollHeight; var scrolltop = document.body.scrolltop; var clIEntHeight = document.body.clIEntHeight; marginBottom= scrollHeight - scrolltop - clIEntHeight; } if(marginBottom<=0) appendimg(); } </script></HTML>https://github.com/WindrunnerMax/EveryDayhttps://www.cnblogs.com/imgss/p/11072266.HTMLhttps://blog.csdn.net/weixin_44135121/article/details/98629830以上是内存溢出为你收集整理的实现瀑布流布局全部内容，希望文章能够帮你解决实现瀑布流布局所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）