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

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

Например,

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

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

источник

2017-02-13 jesders88

По умолчанию $.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/[email protected]/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>

источник

2017-02-13 22:03:29

Высокий. Теперь единственное, что мне нужно, чтобы попытаться исправить, - это нижняя часть сетки. Если вы посмотрите, последнее изображение слева немного дальше, чем правая сторона галереи. Есть ли способ исправить это? – jesders88

@ jesders88 высоты изображений должны совпадать или скомпоновать по математике, чтобы все было на одном уровне с нижними краями. Если вы смешиваете/сопоставляете высоты и ширину случайным образом, вероятность того, что вещи не будут хорошо выровнены, не растягивая или не отсекая части изображений. –

Это имеет смысл. Я пытался выяснить, может ли браузер обнаруживать и соответствовать диапазонам динамической ширины/высоты, чтобы они соответствовали квадрату. Это может быть какая-то сложная математика :). Спасибо за вашу помощь. – jesders88

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

ответ

Смежные вопросы