尝试使用带有imageLoaded的Mansonry进行动态图像后期 - 然后图像(灰色)从左侧和右侧出现在网格中(填充空间大约为10px)。
问题在于,当我将浏览器调整得更大(或更小)时,网格在右侧有相当多的空白区域,应该靠近浏览器的右边缘,15px与左边缘类似。
参见图片示例。
HTML
<div class="bdy h-clearfix des">
<div class="pure-u grid">
<div class="masonry">
<div class="grid-sizer"></div>
<div class="item"><img src="images/1.jpg"></div>
<div class="item"><img src="images/2.jpg"></div>
<div class="item"><img src="images/3.jpg"></div>
</div>
</div>
JS
var container = document.querySelector(".masonry");
// initialize Masonry
var msnry = new Masonry(container, {
columnWidth: 50,
itemSelector: '.item',
gutter: 5,
transitionDuration: 0,
isFitWidth: true,
animate:false,
isResizable: true,
});
imagesLoaded( container, function() {
msnry.layout();
});
请参阅:jsfiddle
任何方式强制图像(灰色)填写整个容器是否调整大小?
帮助表示赞赏!