Question

我正在尝试制作一个使用图像宽度的包装布局。无论是400px还是整个容器的宽度，我都想用我的图片填满空间。我也不想要任何空格。谁能告诉我哪里出错了。代码和代码集如下。

<div class="grid" style="width:1200px; height:100%; background:salmon">
<!--    <div class="grid-sizer"></div> -->
  <div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:200px" /></div>
  <div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:400px"/></div>
  <div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div>
    <div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:600px"/></div>
  <div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:900px"/></div>
  <div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div>
</div>

$('.grid').isotope({
  // options
  layoutMode: 'packery',
  packery: {
    columnWidth: '.grid-item'
  },
  itemSelector: '.grid-item',
  percentPosition: true

});

http://codepen.io/Jesders88/pen/GrpqQr

Answer 1

我遇到了完全相同的问题并切换到了一个包装袋。

请查看此链接http://packery.metafizzy.co/

当我尝试使用带有包装布局模式的同位素时，它不起作用：http://demoserver.co.za/test2.html

当我切换到上面时，效果很好：http://demoserver.co.za/test3.html

同位素包装布局堆叠图像

1 个答案: