Как реализовать вывод картинок с разным размером на CSS, как у pinterest?

143

24 мая 2019, 02:40

Стоит задача вывода картинок разного размера, как на прикрепленном примере. Нужен вывод в 3-4 колонки по горизонтали, хотелось бы реализовать это как у pinterest. Только с увеличением по клику в popup (но это уже детали). Кто сталкивался с подобной задачей, как вы ее реализовали? И может быть кто-то посоветует готовое решение!? Спасибо!

Answer 1

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>