Стоит задача вывода картинок разного размера, как на прикрепленном примере. Нужен вывод в 3-4 колонки по горизонтали, хотелось бы реализовать это как у pinterest. Только с увеличением по клику в popup (но это уже детали). Кто сталкивался с подобной задачей, как вы ее реализовали? И может быть кто-то посоветует готовое решение!? Спасибо!
body {
margin: auto;
}
img {
max-width: 100%;
border: 1px solid #000;
}
.images {
column-count: 4;
column-gap: 5px;
}
.image {
}
<div class="images">
<div class="image">
<img src="https://i.ytimg.com/vi/thzvovPAPiE/maxresdefault.jpg">
</div>
<div class="image">
<img src="https://media1.tenor.com/images/13ae283dfd5cb3325d0275c241ca2ef0/tenor.gif?itemid=9991393">
</div>
<div class="image">
<img src="https://i.pinimg.com/originals/48/d6/f3/48d6f374643ad2d5e52da34ae30b1691.gif">
</div>
<div class="image">
<img src="https://i.imgur.com/Tqk1aB0.jpg">
</div>
<div class="image">
<img src="https://pbs.twimg.com/profile_images/768469648924897281/8x-zTWCg.jpg">
</div>
<div class="image">
<img src="https://img.sharetv.com/shows/episodes/standard/640822.jpg">
</div>
<div class="image">
<img src="https://avatanplus.com/files/resources/mid/5761bf27f390b15555d2b43e.png">
</div>
<div class="image">
<img src="https://cs8.pikabu.ru/post_img/big/2016/11/30/6/1480496763142063693.jpg">
</div>
<div class="image">
<img src="http://i72.beon.ru/15/57/1985715/8/82322308/poyopoyokansatsunikki.jpeg">
</div>
<div class="image">
<img src="https://99px.ru/sstorage/86/2017/05/image_860505171945067056899.gif">
</div>
<div class="image">
<img src="https://avatanplus.com/files/resources/mid/5670287f50f04151a61e3164.png">
</div>
<div class="image">
<img src="https://otvet.imgsmail.ru/download/103208060_26299b2db0220a36e0ed2aa4fc20c480_800.jpg">
</div>
<div class="image">
<img src="https://pbs.twimg.com/profile_images/873788841290846212/tC9p_f1g_400x400.jpg">
</div>
<div class="image">
<img src="https://pbs.twimg.com/profile_images/991574277202857985/AeHK1_J__400x400.jpg">
</div>
<div class="image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-nzQcVSRR0Oy1bmtHq5W6Yx6pfbysInuZFzySYJBxAwHh6udMhw">
</div>
<div class="image">
<img src="https://static.grouple.co/uploads/pics/avatar/ce/20674ed7294f9b7c5b38433fc3ab31_9229.jpg">
</div>
<div class="image">
<img src="http://animevost.org/uploads/fotos/foto_200090.jpg">
</div>
<div class="image">
<img src="https://i.redd.it/cts7ephym8111.jpg">
</div>
</div>
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
На работе делаю сайт, который требует много оптимизации: большое количество графики, анимации и прочего
поле проверить форму на корректное заполнениеполе может содержать только русские слова пробела и дефисы
Вот такая вот проблемкаНаписал калькулятор расчета цены, но фильтрация данных не проходит