砌体有空间,但所有单元格的宽度相同
Masonry has spaces yet all cells have same width
很奇怪,砌体缺少大 space 而所有 li
的宽度都相同:
HTML:
<div class="one-gallery">
<section class="grid-wrap">
<ul class="one-grid">
<li class="grid-sizer"></li><!-- for Masonry column width -->
<li class="itemMG">
<figure>
<img alt="Img 0 " src="images/1.jpg" >
<figcaption><h3> 0 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
</figure>
</li>
<li class="itemMG">
<figure>
<img alt="Img 0 " src="images/2.jpg" >
<figcaption><h3> 1 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
</figure>
</li>
</ul>
</section>
</div>
CSS:
.one-gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
.one-gallery figure {
margin: 0;
}
.one-gallery figure img {
display: block;
width: 100%;
}
/* Grid style */
.grid-wrap {
max-width: 1400px;
margin: 0 auto;
}
.one-grid {
margin: 0 auto;
}
.one-grid li {
width: 24%;
float: left;
cursor: pointer;
}
.one-grid figure {
padding: 15px;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
JS:
砌体自动启动。
* 砌体打包 v4.2.0
它们都有相同的宽度,所以不应该有任何空白space。我能做些什么来修复它?
我认为您不使用 imagesLoaded
https://imagesloaded.desandro.com/ 。所以你的砌体布局是在加载所有图像之前创建的 - 这就是你有这些差距的原因。
function isotope_layout(){
var $container_main_page = jQuery('.masonry_container');
// MAIN CONTAINER
$container_main_page.isotope({
itemSelector: '.post_masonry',
masonry: {
layoutMode: 'fitColumns',
gutter: 0
},
});
$container_main_page.imagesLoaded( function() {
$container_main_page.isotope('layout');
});
}
很奇怪,砌体缺少大 space 而所有 li
的宽度都相同:
HTML:
<div class="one-gallery">
<section class="grid-wrap">
<ul class="one-grid">
<li class="grid-sizer"></li><!-- for Masonry column width -->
<li class="itemMG">
<figure>
<img alt="Img 0 " src="images/1.jpg" >
<figcaption><h3> 0 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
</figure>
</li>
<li class="itemMG">
<figure>
<img alt="Img 0 " src="images/2.jpg" >
<figcaption><h3> 1 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
</figure>
</li>
</ul>
</section>
</div>
CSS:
.one-gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
.one-gallery figure {
margin: 0;
}
.one-gallery figure img {
display: block;
width: 100%;
}
/* Grid style */
.grid-wrap {
max-width: 1400px;
margin: 0 auto;
}
.one-grid {
margin: 0 auto;
}
.one-grid li {
width: 24%;
float: left;
cursor: pointer;
}
.one-grid figure {
padding: 15px;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
JS: 砌体自动启动。 * 砌体打包 v4.2.0
它们都有相同的宽度,所以不应该有任何空白space。我能做些什么来修复它?
我认为您不使用 imagesLoaded
https://imagesloaded.desandro.com/ 。所以你的砌体布局是在加载所有图像之前创建的 - 这就是你有这些差距的原因。
function isotope_layout(){
var $container_main_page = jQuery('.masonry_container');
// MAIN CONTAINER
$container_main_page.isotope({
itemSelector: '.post_masonry',
masonry: {
layoutMode: 'fitColumns',
gutter: 0
},
});
$container_main_page.imagesLoaded( function() {
$container_main_page.isotope('layout');
});
}