Как сделать галлерею как на Яндекс.Картинках?

271

11 февраля 2017, 09:43

Т.е. как тут, с масштабированием изображений разного размера

https://yandex.ua/images/search?text=flower

Answer 1

Простейшее решение - использовать jQuery плагин Masonry или Isotope.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

Answer 2

Используйте Masonry.

И в блок засуньте картинку.

css:
img {
max-width: 100%;
height: auto;
}

Answer 3

Если вы про масштабирование, то можно и с помощью css:

.gallery-row{ 
  height:100px; 
  margin-top:10px; 
} 
 
.gallery-img{ 
 display:inline-block; 
 height:100px; 
 border:1px solid grey; 
 margin:0 5px; 
} 
 
.gallery-img img{ 
 height:100px; 
}

<div class="gallery-row"> 
  <div class="gallery-img"> 
     <img src = "http://dingo.com.ua/source/flowers/323.jpg"/> 
  </div> 
    <div class="gallery-img"> 
     <img src = "http://foneyes.ru/img/picture/Jun/09/31a890e8d9439ea09df6d4a0af2589a6/7.jpg"/> 
  </div> 
    <div class="gallery-img"> 
     <img src = "http://takefon.com/_ld/66/60326919.jpg"/> 
  </div> 
 </div> 
<div class="gallery-row"> 
    <div class="gallery-img"> 
     <img src = "http://takefon.com/_ld/66/60326919.jpg"/> 
  </div> 
  <div class="gallery-img"> 
     <img src = "http://dingo.com.ua/source/flowers/323.jpg"/> 
  </div> 
        <div class="gallery-img"> 
     <img src = "http://foneyes.ru/img/picture/Jun/09/31a890e8d9439ea09df6d4a0af2589a6/7.jpg"/> 
  </div> 
 </div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

JS + Web action на экране при активной ее части

Добрый вечер, друзьяВопрос у меня по вебу такой

296

javascript

Как обрезать строку?

Есть строка var a = "13:45 PM" хочу обрезать PM и оставить только 13:45 Попробовал так var b=strsubstring(5,7) не работает

356

javascript

Передать значение PHP в JS

Здравствуйте!

305

javascript

JavaScript Двойное отрицание(!!) и побитовый оператор Тильда (~)

Изучаю JavaScriptЗадачка из учебника: Напишите функцию checkSpam(str), которая возвращает true, если строка str содержит „html“ или „css“, а иначе false

596