无间隙的砖石画廊布局

Question

我想创建一个砖石画廊，但图像之间没有间隙。我已经尝试过砌体（留有间隙）、同位素（留有间隙）和包装（似乎可以做我想做的，但在布局底部留下交错的图像）。

例如，

我想要一个正方形的图像。让我们说1000x1000。因为我想让所有不同尺寸的图像都适合布局。

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

Answer 1

默认情况下，$.masonry() 不留空隙。从您的 CSS 中移除间隙，确保您的图片宽度匹配，以便所有内容可以并排齐平，并且确保不要在您的砌体配置中指定排水沟或宽度将在元素之间创建 space。

$('.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>

无间隙的砖石画廊布局

Masonry Gallery Layout with No Gaps

css

jquery

jquery-isotope

packery

masonry