Хитрое плавающее задание css / javascript

Question

У меня есть дизайн, который имеет несколько элементов div с различной шириной / высотой, и мне нужно, чтобы они плавали по существу в верхнем левом углу.Простой css float: left не будет работать, потому что он не использует преимущество вертикального пространства, как только он падает на новую строку.

Я предполагаю, что мне нужно будет использовать jQuery для динамического позиционирования каждого div, но я надеялсякто-то может привести меня в правильном направлении.

Это то, что будет делать стандартный оставленный поплавок: стандартный поплавок http://www.media1designs.com/poc/superfloat/diagram_float_left.gif

Это то, что мне нужно сделать: что яneed http://www.media1designs.com/poc/superfloat/diagram.gif

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

Answer 1

У вас должен быть алгоритм для определения, где разместить следующий элемент, учитывая набор существующих элементов и ограничивающий прямоугольник (ширина и высота контейнера).Я бы начал с простого английского и просто записал его сначала ручкой и бумагой - это проще, чем код.

Получив это, вы будете использовать функции jQuery width и height, чтобы получитьразмеры элементов для позиционирования, и я думаю, вам понадобится функция css для установки top / left.position элементов должно быть "absolute", а position содержащего элемента должно быть "relative".См. Все jQuery API методы.

Предполагается, что вы написали свой алгоритм компоновки как функцию calculateOffset(element, container), возвращающую смещенный литерал (например, {left: x, top: y}), и что у вас есть список элементов jQueryelements и jQuery-оболочку container, вы можете сделать что-то вроде этого, чтобы расположить все:

elements.each(function() {
  $(this).css(calculateOffset($(this), container));
});

Сложная часть, конечно же, пишет calculateOffset.Для этого я рекомендую начать с чего-то простого, например, найти максимально возможное (самое низкое top) место для размещения элемента, отдав предпочтение левой стороне (самое низкое left), а затем перейти оттуда.

Answer 2

Вы пробовали плагин для кладки ?

Answer 3

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

Вам нужно будет создать API (по крайней мере, так, как вы думаете о вещах). Скорее всего, у вас получится блок (каждый div будет размечен) и контейнер (область, содержащая div). Примените соответствующие методы, свойства и события к каждому из них, и вы, вероятно, доберетесь до них довольно быстро.