Сетка в стиле Microsoft-metro, построенная динамически

Я хочу сделать какой-то плагин jQuery, который может заполнить сетку 3 X 3 (например, стиль Microsoft-Metro). Это должно быть что-то вроде этого:

  • Если у меня есть 1 плитка, она должна занимать всю сетку (1-9).
  • Если у меня есть 2 плитки, это должна быть одна плитка (1-6) и другая плитка (7-9).
  • Если у меня 3 плитки, то должно быть (1-2 и 4-5), (3 и 6), (7-9)
  • Если у меня есть 5 плиток, это должно занять (1-2), (3), (4-6), (7), (8-9)

И так далее!

-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------
| 7 | 8 | 9 |
-------------

Можно ли динамически заполнять мою сетку в зависимости от количества плиток (максимум 9). Есть ли на это какой-то расчет?


person iSenne    schedule 03.09.2012    source источник
comment
Возможно, JQuery Isotop: isotope.metafizzy.co. Он используется на странице сайтов StackExchanges: stackexchange.com/sites.   -  person McGarnagle    schedule 04.09.2012


Ответы (1)


Используйте display: -ms-flex с -ms-flex-Wrap: wrap. Это позволит вам обернуть автоматически. Вам нужно будет размер ваших элементов в соответствии с номером вы хотите.

Другой вариант — использовать -ms-grid и настроить столбцы/строки (и диапазоны) на основе элементов.

person Dominic Hopton    schedule 03.09.2012