Добавление с переменным размером div

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

Вот пример:

http://i.imgur.com/AmbCYAZ.png.

Теперь предположим, что я хочу, чтобы div номер 48 добавлялся непосредственно после номера 47 (под div 33).

Нравится http://i.imgur.com/vikKASs.png.

Возможно ли это вообще? А если нет, то какие альтернативы будут?

Моего лис, если кому-то интересно:

<li class="ui-state-default listitem smallbox"> 
    <div style="background-color: #D305ED" class="inner">1</div> 
</li>

Edit: Что делать, если я хотел использовать библиотеку JQuery UI, чтобы позволить мне двигаться дивы по экрану. Будет ли в этом случае использовать упаковку или кладку?

источник

2015-04-30 Treebeards

Вам действительно нужен умный контейнер (например, изотоп или кладка) для элементов макета с любым интеллектом. A D.I.Y. Альтернативой является использование таблицы с набором rolspan и colspans. –

Вы будете обрабатывать эту логику в javasccript/jquery. Есть множество библиотек, которые делают это очень хорошо, если только вам не требуется строить это с нуля. Я бы рекомендовал проверить изотоп/кладку. – ajmajmajma

. Вы должны посмотреть на плагин masonry js http://masonry.desandro.com/ –

Вы должны вычислить позиционирование в времени рендеринга.

Чтобы было легче, проверить Jquery плагин Кладка: http://masonry.desandro.com/

источник

2015-04-30 14:10:24

Упомяните, что вы подразумеваете под «Вы должны вычислить позиционирование в времени рендеринга»? –

Вы должны использовать javascript, чтобы получить ширину и высоту всех ящиков в вашем контейнере, а затем вычислить новое позиционирование для полей без пробелов. Это не простой расчет, но есть некоторые плагины (например, масонство), которые могут выполнять эту «трудную» работу для вас. –

Я имел в виду * переписать свой ответ *, поскольку эта линия в настоящий момент мало смысла :) –

Если макет является динамическим, вы можете использовать packery или masonry, которые предназначены для макета элементы с несколькими зазорами.

Если это статический макет, вы можете создать эффект, заполнив таблицу и отслеживая col и rolspan ячеек. Логика для поиска вперед сложна, поэтому вы можете попробовать следующий двухэтапный подход:

Как ваш пример имеет только 2 размера (один и два размера), вы можете создать массив 2d и постепенно заполнять ячейки номерами позиций, основываясь на размерах. Это очень грубая версия того, что делает пакет на пиксельной основе. После заполнения массива вы затем генерируете результат на основе массива (в таблице TRs/TD или DIV с абсолютным позиционированием).

источник

2015-04-30 14:21:29

Будут ли эти подходы работать совместно с функциями перетаскивания JQuery UI? – Treebeards

@Treebeards: 'упаковка 'перетаскивается. Я предлагаю вам сначала попробовать это. –

Добавление с переменным размером div

ответ

Смежные вопросы