JS 网格布局Grid之瀑布流

陈醋拌饭

已于 2024-10-09 10:10:01 修改

阅读量1.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript css3 文章标签： javascript 开发语言前端

于 2024-05-09 15:41:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44167504/article/details/138613440

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 // 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,