雨哥分享 grid 瀑布流记录

946 阅读1分钟

话不多说,直接上代码

<!--
 * @Descripttion: 
 * @Author: qiuyu.cai
 * @Date: 2020-09-27 14:51:36
 * @LastEditors: qiuyu.cai
 * @LastEditTime: 2021-06-18 10:35:09
-->
<div class="container">
    <div class="item" style="background: rgb(68, 0, 255); height: 180px;">1</div>
    <div class="item" style="background: rgb(251, 255, 0); height: 100px;">2</div>
    <div class="item" style="background: rgb(255, 72, 0); height: 110px;">3</div>
    <div class="item" style="background: rgb(255, 0, 179); height: 100px;">4</div>
    <div class="item" style="background: rgb(30, 255, 0); height: 160px;">5</div>
    <div class="item" style="background: rgb(0, 217, 255); height: 180px;">6</div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 10px;
        grid-column-gap: 10px;
        border: 1px solid #000;
        width: 600px;
        margin: auto;
    }
    .item {
        font-size: 30px;
    }
</style>

<script>
    (function () {
		var wrap = document.getElementsByClassName('item');
        for (var i = 0; i < wrap.length; i++) {
            var lastW = wrap[i].offsetHeight;
            console.log(1, lastW)
            wrap[i].style.gridRow=`auto / span ${lastW/10+1}`
        }
	})()
</script>