Как сделать такой вывод изображений?

233

10 декабря 2016, 10:37

Здравствуйте. Есть несколько изображений, все примерно одинакового размера. Я хочу вывести эти изображения на странице в таком стиле.

Думал просто сделать

imga img {
    width: 50%;
}

Но тогда они получаются все одинакового размера. Наверное тут не обойтись одним css. Буду благодарен за полезную информацию.

Answer 1

Конечно же одним imga img { width: 50%;} не обойтись. Тут нужен и css и js.

Я предлагаю вам взглянуть на Freewall.

Это кроссбраузерный responsive Jquery плагин, который поможет вам создать много различного типа макетов сеток: гибкий макет, макет для фото, вложенные макеты, metro стиль, как у pinterest и прочие виды. Там используется CSS3 анимация. Данный плагин - хорошее решение для динамического создания макета сетки как для десктопа, так и для мобильных версий и версий типа tablet.

домашняя страница плагина

Если он не устроит, то в поиске по запросу javascript photo brick вы сможете, я думаю, найти что-то еще подходящее для вас, например

http://masonry.desandro.com/

http://callmecavs.com/bricks.js/

и многое другое.