Comments 31
Все равно неровно получилось) нерешаемая задача. За отсутствие ии - респект
Есть способ размещения блоков различной высоты, как в пинтересте, называется masonry. Вроде бы была экспериментальная фича для него прямо в CSS, но без него делается скриптами тоже
Стоит так же упомянуть о известной подключаемой библиотеке, решающей как раз данную задачу, но, к сожалению, совсем вылетело из головы её название и нагуглить не смог
Masonry. В свое время одноименную штуку в CSS пытались протолкнуть, но как-то не зашло.
Не совсем понятно, зачем этот инструмент переизобретать. Он как 10 лет назад решал свою задачу, так и продолжает ее решать.
Точно. Это та штука.
Благодарю, что напомнили.
На тот момент, когда решал эту проблему, эта библиотека мне показалась слишком тяжеловесной. Там, если мне не изменяет склероз, позиция каждого блока высчитывалась и размещение было через абсолютное позиционирование. Что для динамического изменения содержимого - сомнительно.
Современная версия, на первый взгляд, оно там вообще вроде через canvas, как-то реализовано....
P.S. Без специальных средств сайт проекта не открывается. Дожили...
в сравнении с masonry такой подход действительно более легковесный, и думаю, что можно было бы это оформить в свою опенсорсную либу
Уже оформлено https://github.com/admtoha/flex-size-fix
А прикладная задача какая была, если не секрет? Виджеты распределять по панели?
ребята, есть же уже готовое решение, применяется при паковании текстур в атлас
Жду когда вендоры договоряться и нам сделают нативную реализацию: или новый `display: masonry` или дополнительные свойства во флексовом и гридовом контексте item-flow - https://shabalin.online/blog/css/item-flow/
Есть такой вариант от Димы Карловского ( создателя $mol
https://best-online-games.github.io/prof/#!=prof
Тут пример размещения, работает как для телефонов так и для декстопа
Компонент $mol_gallery
У меня этот пример почему-то глючит, вылезает за пределы экрана. (Десктоп Хром)
Диму Карловского на Хабре не особо жалуют, на сколько я могу судить по реакциям на его комментарии к статьям. При чём не понятно почему, вроде вполне нейтральные по тону и содержанию сообщения...
Покажи пожалуйста что там за баг, у меня тоже хром и ок
К Диме личное отношение негативное сложилось ( не у меня ) за продвижения своего фрейморка
Содержимое обрезано справа ибо не вмещается (почему-то) в доступную ширину окна. Это при непосредственной загрузке страницы. Если ширину окна "подвигать" вручную, то содержимое адаптируется (очевидно скрипт срабатывает) и всё тогда вмещается и соответственно выглядит нормально.
Проблема в изначальной "подстройке" под ширину окна при загрузке страницы.
А понял, не оно не обрезано, но да, при первом открытии неверное местоположение
Там у тебя на скрине скролбар внизу виден, по нему видно что страница посередине открылась "без доводки"
А как тебе само расположение блоков ?
Ну, само решение через подгонку размеров самих внутренних блоков (только в большую сторону от оригинала, как я понимаю) - как минимум интересно.
Но, вот тут не оно не особо выглядит (ширина примерно 1600px) на мой вкус.
Я так понял, что это у вас меню. Меню бы я делал по другому.
Лет 5 назад я бы реализовал классический горизонтальный / вертикальный блок / список "кнопок" с выпадающим для каждого уровня вложенности подменю.
Сегодня бы сделал тоже самое но с выпадающим "Мега" блоком на всё доступное пространство со всем вложенным содержимым.
В случае с горизонтальным расположением фиксил бы случай с "невлезанием" кнопок скриптом, которым бы скрывал непоместившиися итемы в подменю созданной крайней справа кнопки с надписью "..." или "Остальное".
del (Промахнулся веткой)
За без-ии респект.
Пробовали использовать flex-basis: auto / flex: initial?
Наличие переполнения по высоте определяется так: .scrollHeight > .scrollHeight.
Пригляделся, вроде показалось, что никогда условие не выполнится.
/* цикл увеличения высоты контейнера "node" проводит итерации до тех пор
, пока переполнение по высоте (.scrollHeight > .scrollHeight) и ширине (.scrollWidth > .offsetWidth) не будет устранено */А, не, не показалось...
Но в коде же нормально, scroll с offset:
while((node.scrollHeight > node.offsetHeight || node.scrollWidth > node.offsetWidth) && savety){P.S. "savety" это от safety или советов? ;-)
Хорошая статья, удачи на Хабре!
а какой смысл писать JS в 28 строк, если верное направление было с column-count: 4?
если ширина колонок известна, то не вижу проблемы.
хорошо под разные разрешения мы напишем еще 3 строки медиазапросов, но это гораздо лучший и менее затратный способ чем писать JS.
P.S. такое реализовывал сам и работает без косяков в разных браузерах, 10 лет назад такое писалось на jquery с библиотекой mansory
Равномерное размещение блоков разных размеров