实现瀑布流布局
时间:2022-07-24
本文章向大家介绍实现瀑布流布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现瀑布流布局
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
实例
主体思路是记录每一列的高度,父容器相对定位,成员绝对定位,利用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/EveryDay
参考
https://www.cnblogs.com/imgss/p/11072266.html
https://blog.csdn.net/weixin_44135121/article/details/98629830
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【ICLR2020】Transformer Complex-order:一种新的位置编码方式
- 多角度理解CNN
- 【NLP保姆级教程】手把手带你CNN文本分类(附代码)
- 【NLP保姆级教程】手把手带你RNN文本分类(附代码)
- 作为一名Android面试官的碎碎念,面试要掌握这几个关键点!
- 拉格朗日乘子法和KKT约束
- Transformers Assemble(PART IV)
- 【NLP保姆级教程】手把手带你fastText文本分类(附代码)
- 【情感分析】ABSA模型总结(PART I)
- 【Kick Algorithm】十大排序算法及其Python实现
- 【情感分析】ABSA模型总结(PART II)
- 【NLP保姆级教程】手把手带你RCNN文本分类(附代码)
- 【NLP保姆级教程】手把手带你HAN文本分类(附代码)
- 【情感分析】基于Aspect的情感分析模型总结(PART III)
- NLP简报(Issue#6)