使用 isotope javascript 插件,如何消除间隙?
Using isotope javascript plugin, how can I get rid of gaps?
我正在尝试构建一个网格,用于获取用户提交的所有照片,并将它们布置成一个整齐的网格,该网格将响应浏览器的方面 ratio/resolution 回流。
Isotope 看起来是这方面的实际库。我已经根据我看过的他们的一个演示实现了所有内容,并且我使用了两种静态尺寸的图像(纵向分辨率为 346x533,横向分辨率为 520x347)。由于图片大小相同或高度是另一张的一半,因此这应该是一个不错的网格。问题是,它根本没有像我期望的那样渲染网格。有时我得到返回的布局,其中有很大的差距,
HTML:
<div class="ga">
<div class="row">
<div class="gridsa">
<div class="gridsa-sizer"></div>
<div class="gridsa-item">
<img src="img/tile1.jpg" class="img-port"/>
</div>
<div class="gridsa-item">
<img src="img/tile7.jpg" class="img-land"/>
</div>
<div class="gridsa-item tile3">
<img src="img/tile3.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile4.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile7.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile6.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile8.jpg" class="img-land"/>
</div>
</div>
</div>
</div>
CSS
* { box-sizing: border-box; }
/* ---- isotope ---- */
.gridsa {
background: #ffcc33;
margin: 0px auto;
}
/* clear fix */
.gridsa:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.gridsa-sizer,
.gridsa-item {
width: 33.333%;
}
.gridsa-item {
padding:0px;
float:left;
}
.gridsa-item img {
display: block;
max-width: 100%;
position:relative;
}
.gridsa-item h2{
color:#ffffff;
position: absolute;
bottom: 5%;
left: 33.3%;
width: 100%;
}
.gridsa-item.tile2 h2{
color:#ffffff;
position: absolute;
bottom: 1px;
left: 25%;
width: 50%;
}
.gridsa-item.tile3 h2{
color:#ffffff;
position: absolute;
bottom: 1px;
left: 0;
width: 80%;
}
.ga{
background-color: #0c5449;
}
JS
<script type="text/javascript">
$( document ).ready(function() {
// init Isotope
var $grid = $('.gridsa').isotope({
itemSelector: '.gridsa-item',
percentPosition: true,
masonry: {
columnWidth: '.gridsa-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
</script>
这是问题的 jsfiddle,但您需要最大化 window 并展开 html 部分才能看到问题。 https://jsfiddle.net/x6dhwh6k/2/
发生这种情况是因为您的图片尺寸小于可用尺寸 space
要实现欲望效果,请将 width: 100%
应用到您的 img
喜欢
.gridsa-item img {
width: 100%;
height: auto;
max-width: 100%;
}
查看更新 fiddle https://jsfiddle.net/x6dhwh6k/3/
现在为了保持图像纵横比,您可能会在图像下方看到很小的间隙,但我想同位素插件没问题,因为它应该是这样工作的
我正在尝试构建一个网格,用于获取用户提交的所有照片,并将它们布置成一个整齐的网格,该网格将响应浏览器的方面 ratio/resolution 回流。
Isotope 看起来是这方面的实际库。我已经根据我看过的他们的一个演示实现了所有内容,并且我使用了两种静态尺寸的图像(纵向分辨率为 346x533,横向分辨率为 520x347)。由于图片大小相同或高度是另一张的一半,因此这应该是一个不错的网格。问题是,它根本没有像我期望的那样渲染网格。有时我得到返回的布局,其中有很大的差距,
HTML:
<div class="ga">
<div class="row">
<div class="gridsa">
<div class="gridsa-sizer"></div>
<div class="gridsa-item">
<img src="img/tile1.jpg" class="img-port"/>
</div>
<div class="gridsa-item">
<img src="img/tile7.jpg" class="img-land"/>
</div>
<div class="gridsa-item tile3">
<img src="img/tile3.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile4.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile7.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile6.jpg" class="img-land"/>
</div>
<div class="gridsa-item">
<img src="img/tile8.jpg" class="img-land"/>
</div>
</div>
</div>
</div>
CSS
* { box-sizing: border-box; }
/* ---- isotope ---- */
.gridsa {
background: #ffcc33;
margin: 0px auto;
}
/* clear fix */
.gridsa:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.gridsa-sizer,
.gridsa-item {
width: 33.333%;
}
.gridsa-item {
padding:0px;
float:left;
}
.gridsa-item img {
display: block;
max-width: 100%;
position:relative;
}
.gridsa-item h2{
color:#ffffff;
position: absolute;
bottom: 5%;
left: 33.3%;
width: 100%;
}
.gridsa-item.tile2 h2{
color:#ffffff;
position: absolute;
bottom: 1px;
left: 25%;
width: 50%;
}
.gridsa-item.tile3 h2{
color:#ffffff;
position: absolute;
bottom: 1px;
left: 0;
width: 80%;
}
.ga{
background-color: #0c5449;
}
JS
<script type="text/javascript">
$( document ).ready(function() {
// init Isotope
var $grid = $('.gridsa').isotope({
itemSelector: '.gridsa-item',
percentPosition: true,
masonry: {
columnWidth: '.gridsa-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
});
</script>
这是问题的 jsfiddle,但您需要最大化 window 并展开 html 部分才能看到问题。 https://jsfiddle.net/x6dhwh6k/2/
发生这种情况是因为您的图片尺寸小于可用尺寸 space
要实现欲望效果,请将 width: 100%
应用到您的 img
喜欢
.gridsa-item img {
width: 100%;
height: auto;
max-width: 100%;
}
查看更新 fiddle https://jsfiddle.net/x6dhwh6k/3/
现在为了保持图像纵横比,您可能会在图像下方看到很小的间隙,但我想同位素插件没问题,因为它应该是这样工作的