gpt4 book ai didi

javascript - 如何为不同高度的元素制作网格?

转载 作者:可可西里 更新时间:2023-11-01 13:42:27 26 4
gpt4 key购买 nike

我正在开发一个网络应用程序,但遇到了以下问题:

我想显示一个 Grid of Tiles,它可以有不同的 blockHeight 和 Width。 See this simplified picture

出于兼容性原因,我不能使用 CSS GRID。

我得到一个具有不同 blockHeights 和 blockWidths 的 Tiles 列表以显示在我的网格中。例如。 blockHeight 为 2 的方 block (如上图中的第一个)现在的高度只有原来的两倍。这显然不会创建另一个行,所以在两个小方 block 下方有一个空白空间。

如何在不使用 CSS GRID 的情况下删除网格的空白区域?

提前致谢!

最佳答案

使用以下库,您可以实现这一点:

https://haltu.github.io/muuri/

框尺寸的 CSS 计算与默认框尺寸成正比;占利润。

var grid = new Muuri('.grid', {
dragEnabled: true
});
.grid {
position: relative;
background: #6EB3CA
}
.item {
display: block;
position: absolute;
width: 64px; /* Default 1 unit */
height: 64px; /* Default 1 unit */
margin: 4px; /* Margin */
z-index: 1;
background: #fff;
color: #000;
border-radius: 4px;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
line-height: 64px;
}

.item-6x2 {
width: 424px; /* (64 * 6) + (4 * 10) */
height: 136px; /* (64 * 2) + (4 * 2) */;
}
.item-2x1 {
width: 136px; /* (64 * 2) + (4 * 2) */
height: 64px; /* (64 * 1) + (4 * 0) */;
}
.item-6x2 .item-content {
line-height: 136px;
}
<script src="https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js"></script>
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.min.js"></script>
<script src="https://unpkg.com/muuri@0.7.1/dist/muuri.min.js"></script>

<div class="grid">
<div class="item item-6x2">
<div class="item-content">
6×2
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
</div>

关于javascript - 如何为不同高度的元素制作网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53412555/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com