Question

我想创建一个砌体图库，但图像之间没有间隙。我尝试过砌筑（留下间隙），同位素（留下间隙）和匣子（看起来像我想做的那样，但在布局底部留下交错的图像）。

例如，

我想要一个正方形的图像。可以说1000x1000。我希望在布局中包含所有不同尺寸的图像。

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

Answer 1

默认情况下，$.masonry()不会留下空白。从CSS中删除间隙，确保图像宽度匹配，以便可以并排齐平，并确保不要在砌体配置中指定将在元素之间创建空间的装订线或宽度。< / p>

＆＃13;

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

＆＃13;

img {
  max-width: 300px;
}

＆＃13;

<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>

＆＃13;

砌体画廊布局没有空隙

1 个答案: