砌体画廊布局，没有间隙

Question

我想创建一个砖石画廊，但图像之间没有间隙。我尝试过砖石(留下间隙(、同位素(留下间隙(和包装(似乎做了我想做的事，但在布局底部留下交错的图像(。

例如

我想要一个正方形的图像。假设 1000x1000。因为我想让所有不同大小的图像适合布局。

有谁知道如何做我想要完成的事情？

Answer 1

默认情况下，$.masonry()不会留下间隙。从 CSS 中删除间隙，确保图像宽度匹配，以便所有内容可以并排齐平，并确保不要在砖石配置中指定会在元素之间创建空间的装订线或宽度。

$('.masonry').masonry();

img {
  max-width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
  <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
  <img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
  <img src="http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg">
  <img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg">
  <img src="http://www.w3schools.com/w3css/img_forest.jpg">
</div>