gpt4 book ai didi

jQuery Masonry 呈现 "row blocks"而不是拟合元素

转载 作者:行者123 更新时间:2023-11-28 08:57:00 24 4
gpt4 key购买 nike

jQuery masonry 插件的一个简单用法是将图像放置在“ block ”中,而不是在空白处放置元素。该图自行解释:

enter image description here

有没有办法修复(或至少最小化)这些“空洞”?

HTML:

<!-- this overlay has height 100%, no scroll and position fixed -->
<div class='overlay-container'>

<!-- the inner container is "scroll-able": -->
<div class='row' id='ms-container'>

<!-- masonry items... -->
<div class='col-md-4 ms-item'>
<div class='boxcontainer'>
<img src="photo.png" />
<h1>
<a href='#'>
activity_2
</a>
</h1>
</div>
</div>
<!-- more items... -->

</div>
</div>

JavaScript:

    var $container = $('#ms-container');

$container.imagesLoaded(function() {
$container.masonry({

itemSelector: '.ms-item',
columnWidth: '.ms-item',
transitionDuration: 0.4

});

});

CSS:

.overlay-container {
height: 100% !important;
position: absolute;
top:0px;
width: 58%;
left: 30px;
padding: 50px 10px 10px 10px;
overflow-y: auto;
overflow-x: hidden;
}

.boxcontainer {
border:1px solid #ededed;
background:#fff;
font-size:13px;
text-align:center;
transition:border 500ms ease-out;
border-bottom:medium double #ddd;
position:relative;
overflow:hidden;
}

最佳答案

我曾尝试使用 bootstrap 3 在元素中使用砌体,但我已经放弃了。相反,我使用了 Isotope那要容易得多。我用你的结构做了一个例子,check it out .请注意“相对容器”中的插件不要丢失很重要。

HTML

<!-- this overlay has height 100%, no scroll and position fixed -->
<div class='overlay-container'>
<div class="relative">
<!-- the inner container is "scroll-able": -->
<div class='row' id='ms-container'>

<!-- masonry items... -->
<div class='col-md-4 ms-item'>
<div class='boxcontainer'>
<img src="http://placehold.it/300x500" />
<h1>
<a href='#'>
activity_2
</a>
</h1>
</div>
</div>

<!-- more items... -->

</div>

</div>
</div>

CSS

.overlay-container {
height: 100% !important;
position: absolute;
top:0px;
width: 58%;
left: 30px;
padding: 50px 10px 10px 10px;
overflow-y: auto;
overflow-x: hidden;
}

.boxcontainer {
border:1px solid #ededed;
background:#fff;
font-size:13px;
text-align:center;
transition:border 500ms ease-out;
border-bottom:medium double #ddd;
position:relative;
overflow:hidden;
}

.relative { position:relative; }

JavaScript

$("#ms-container.row").isotope({
masonry: {
columnWidth: ".col-md-4"
},
itemSelector: ".ms-item",
percentPosition: !0,
layoutMode: "masonry"
});

希望这对您有所帮助。

关于jQuery Masonry 呈现 "row blocks"而不是拟合元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21796489/

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