如何制作底部平坦的同位素版面？
如何制作底部平坦的同位素版面？
提问于 2019-12-29 20:54:14
我正在使用同位素js https://isotope.metafizzy.co/，不能理解如何使我的平底布局，如这里的https://diefinnhutte.qodeinteractive.com/masonry-portfolio/。我不能为我的积木设置固定的高度，但在上面的例子中，我认为同位素会给出它自己的高度。
怎么做呢？
我有简单的代码：
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>我的css：
.grid-item {width: 33%}和js：
$('.grid').isotope({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
});在网格-项目中，我有img，它们可以有不同的高度，所以我应该怎么做？
提前感谢！
回答 1
Stack Overflow用户
发布于 2019-12-30 02:16:55
同位素很适合创建这些布局，但它有一些需要处理的怪癖。在您的例子中，您使用的是图像，而这些图像可以指示布局是如何计算的。我建议您使用同一作者的imagesLoaded库，首先检查图像是否已加载，然后渲染布局。否则，在加载图像之前，masonry布局中的项目将不会有任何高度。
如果你想要一个顶部和底部平坦的布局，那么你需要一些固定的高度值。如果图像的完好率比高度更重要，那么这将是不可能的。
可以使用CSS中的object-fit属性为图像提供background-size: cover类型的效果。它将确保任何给定的图像将覆盖砖石网格中项目的整个空间。
在这些示例中，我使用了多个不同大小的图像，尽管它们存在差异，但它们都可以正常工作。
查看下面的Isotope和imagesLoaded的代码片段。
var $grid = $('.grid').imagesLoaded( function() {
$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-item',
}
});
});*, *::before, *::after {
box-sizing: border-box;
}
.grid-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 33.3333333%;
height: auto;
}
.grid-item.is-wide {
width: 66.6666666%;
}
.grid-item::before {
content: "";
grid-area: 1 / 1 / 2 / 2;
display: block;
}
.grid-item::before,
.grid-item.is-wide.is-high::before {
padding-top: 100%;
}
.grid-item.is-wide::before {
padding-top: 50%;
}
.grid-item.is-high::before {
padding-top: 200%;
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item ">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59519583
复制相关文章
相似问题
腾讯云开发者
