Надо что-бы именно так было, или что-бы оно перемешивалось рандомно?
Первое можно сделать просто абсолютным позиционированием, правда придётся сделать какой-то интерфейс для задания этих абсолютных позиций (если список постов будет часто меняться).

В принципе наверное можно задрочиться и разбрасывать элементы автоматически, но результат скорее всего будет выглядеть паршиво.

Нужно именно автоматом. Крайний вариант — абсолютное позиционирование, но учитывая то, что посты будут добавляться... Возможно, получится что-то с максимальной высотой изображения и отступами для нескольких :nth-child(), но попробую уже завтра.

И фото будут хаотичного размера?

Почему-то в голову взбрела идея сделать сеё поделие через тиблицу (table). «Хаотичность» через colspan/rowspan, а в каждом td находится div, который будет адаптироваться под ширину/высоту родителя (т.е. td). Итого: не надо никакого абсолютного позиционрования и легче под мобилки адаптировать. Хы)

Берёшь div-контейнер, ограниченный по ширине, и несколько рандомных превьюшек более-менее сопоставимого раздела.

Для превьюшек делаешь через css display: inline, и пусть браузер сам их расставляет в пределах ширины контейнера.

Навскидку могу предложить делать это средствами js а не css. Напиши функцию, которая на вход будет принимать массив размеров картинок и раскидывать их случайным образом так, чтобы они как бы частично прилегали друг к другу (отступы можно сделать виртуально делая картинку больше, чем она есть), а потом просто сделаешь сдвиг координат, чтобы оно пришло к центру и отрисуешь.

Тут суть именно в расположении самих контейнеров.

Есть такой вариант, но хотелось сначала рассмотреть варианты с CSS. Возможно, что-то пропустил.

По JS - что-то похожее делает Packery, но он именно выравнивает, используя абсолютное позиционирование.

Может анализ кода поможет взять что-нибудь полезное отсюда:
https://github.com/adrienverge/PhotoCollage

Вот тут случайно не то, что тебе нужно? https://css-tricks.com/seamless-responsive-photo-grid/

Не, совсем не то. Сравни с тем, что на прикреплённом изображении.

Решение

Решил, короче, не заморачиваться и реализовать это в виде прозрачных полей у изображений.

С помощью яваскрипта задавать случайное расположение?
На мой взгляд это пздц какая глупость ни в какие каконы хорошего? проверенного дизайна не укладывается и выглядит как простите говно.
Кстати почему по ссылке на работу надписи вообще за экран вылазят? Ужас же откровенный! Или это еще в процессе разработки? Уберите на локалхост и больше не показывайте никому! А то убить ведь так можно по неосторожности! :D

сделать просто абсолютным позиционированием

Побрызгал святой водой.

Просто { display: block; float: left; } не пробовал?

Побрызгал святой водой.

Есть какая-то идея лучше? Или просто уверенность что position: absolute это фифифи?
Конечно это фифифи, для нормальных задач. Хорошие, модные средства позиционирования элементов, которым учат все вменяемые хаутушечки, рассчитаны под хорошие, регулярные раскладки. В хороших раскладках элементы либо уже уложены во вменяемые сетки, строки, столбцы, либо их можно в них уложить без потери.
То что нарисовал заказчик не укладывается в нормальные модели позиционирования (или я не вижу как это адекватно в них уложить).
Для именно этой раскладки какие-то вариации на тему position absolute кажутся одним из немногих условно вменяемых решений.
Ещё может получиться использовать css свойство grid, там кажется можно дробить и объединять ячейки, создавая весьма причудливые раскладки. Правда он не везде поддерживается.
Оба варианта не предусматривают автоматической раскладки элементов, тут в любом случае без нетривиальной логики не обойтись.

Кстати вроде-бы есть JS либы которые умеют автоматически разбрасывать элементы подобным образом, когда-то натыкался на что-то подобное.

Это же задача упаковки, она NP-полная, а значит хорошего решения ты не найдёшь.

Умеет Masonry.
http://masonry.desandro.com/layout.html
Но судя по всему заказчику тот еще неадекват и ему глаза в японском плену удалили с помощью ручной дрели. Masonry расскладывает изображения плиткой, НО как и положено по канонам классического дизайна подчеркивает невидимые вертикальные линии, тем самым не нарушая ритм визуального считывания информации. А позишн абсолют абсолютное зло, т.к. при изменении размеров окна браузера все разъедется и превратится в абсолютную кашу.

Что мешает позиционировать относительно контейнера, а не относительно вьюпорта? Да проблемы есть, да нужны костыли. Это вёрстка, детка, тут всегда есть проблемы и всегда нужны костыли.

Вариант «объяснить заказчику что на самом деле он этого не хочет» по умолчанию подразумевается как один из вариантов, не вижу смысла каждый раз упоминать его явно, особенно если есть какие-то другие варианты.

В данном случае не обязательно раскладывать элементы оптимальным способом, тут другие критерии качества, да и раскладку можно генерить один раз при добавлении элемента, и просто хранить на сервере.
Но да, всё-равно нетривиальная задача. Заняться можно либо за жирный прайс, либо от большого интереса.

Что мешает позиционировать относительно контейнера, а не относительно вьюпорта?

Тогда это будет position: relative;
Хотя я могу и ошибится, лень сейчас уточнять. Насколько мне память не изменяет absolute позиционирует элементы от края браузера, если только у родительского элемента не описано другое.

1. Искренне сочувствую :-D 2. Я думаю, что заказчику не так уж и нужен хаос. Хаос ведь предполагает, что будут большие пустые области произвольного размера в произвольных местах страницы.
Хаос означает, что мы не можем контролировать расположение элементов. А значит не можем гарантировать, что будет выглядет так, как нарисовал заказчик.
В данном случае, конечно, предполагается не хаос, а просто какие-то особенные правила расположения, которые и нужно бы формализовать: уточнить у заказчика или придумать самому по предложенному рисунку.

absolute позиционируется относительно ближайшего родителя с position fixed, relative или absolute. Может перед тем как делать «заявления космического масштаба и космической же глупости» стоит не полениться уточнить как там оно?

Ты школьник что ли? В интернете кто-то не прав, сразу помпаж задницы начался.

Написал чушь, получил развёрнутое объяснение почему исходное заявление — чушь, получил объяснение почему контраргументы — чушь, «ты школьник что-ли?». Слив засчитан.
Видимо нормальной реакцией взрослого, уравновешенного человека должна была являться фраза вроде «ты ***!».

Хаотичное расположение картинок (комментарий)

Хотя я могу и ошибится, лень сейчас уточнять.

По моему у тебя чайник немного посвистывает. Без обид. Не вижу смысла с тобоой диалог вести. Думаю специалисты тебе помогут.

Не ты-ли начал разговор с окропления святой водой и рассуждений про абсолютное зло?

Я переносил сайт, у них фича такая - справа и слева соседние страницы. По клику на них срабатывает переключение на этот слайд.

Мне вообще этот сайт отвратителен, но клиентка хочет. И платит деньгами :)

Решил сделать добавлением прозрачных полей к фотографиям. Заказчице понравилось :) Дальше пускай мучается сама.