砌体 - 无法将图像放入整个容器中

时间:2014-01-16 15:43:00

标签: javascript jquery

尝试使用带有imageLoaded的Mansonry进行动态图像后期 - 然后图像(灰色)从左侧和右侧出现在网格中(填充空间大约为10px)。

问题在于,当我将浏览器调整得更大(或更小)时,网格在右侧有相当多的空白区域,应该靠近浏览器的右边缘,15px与左边缘类似。

参见图片示例。enter image description here

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

任何方式强制图像(灰色)填写整个容器是否调整大小?

帮助表示赞赏!

0 个答案:

没有答案