JS 网格布局Grid之瀑布流
一、思路
1、设置列规则,如最大最小值-旨在自适应宽度grid-template-columns
2、设置默认行高grid-auto-rows
3、设置列间距grid-column-gap
(也可以列宽不占满使用justify-content
设置水平位置)
4、行间距使用行高间隔
5、获取子容器的高按默认行高确定容器上下边框跨越的网格数
function setRow(){
// 获取el实例
let itemList = document.getElementsByClassName('grid-item')
for(let el of itemList){
let rows = Math.ceil(el.clientHeight / 10) + 10 // el高除以一个默认网格行高+1个间隔防止贴在一起
el.style.gridRowEnd = 'span ' + rows
}
}
.grid-container {
height:800px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
background-color: #2196F3;
padding: 10px;
grid-auto-rows:1px;
align-items: start;
grid-column-gap:8px;
overflow: hidden auto;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0