Макетная галерея Макет без пробелов

Question

Я хотел бы создать галерею каменной кладки, но между ними не должно быть пробелов. Я пробовал каменную кладку (оставляет пробелы), изотоп (оставляет пробелы) и упаковку (кажется, делает то, что я хочу, но оставляет пошаговые изображения внизу макета).

Например,

Я хочу иметь квадратное изображений. Скажем 1000х1000. В том, что я хочу, чтобы изображения разных размеров соответствовали макету.

Кто-нибудь знает, как сделать то, что я пытаюсь выполнить?

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>