Как реализовать динамически изменяющуюся сетку на веб-странице?

Question

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

1. Каждый прямоугольник (назовем это ячейкой) имеет свой собственный цвет, некоторый текст, написанный внутри него, и рамку, которая отличает его от соседей.
2. Цвет, форма и размер каждой ячейкии текст, который появляется внутри, является частью входных данных для создания веб-страницы: они зависят от пользователя, который в данный момент вошел в систему, и периодически изменяются со временем.

Учитывая данные для всехсотни ячеек, как я могу нарисовать (и перерисовать) их на веб-странице?Какую технологию мне использовать?Таблицы HTML / JavaScript / Пользовательский интерфейс JQuery / HTML5 Canvas / ...?

Моя справочная информация: я достаточно комфортно программирую в целом, но я не привык ни к одной из новейших технологий, используемых для создания веб-страниц, кроме базового html, некоторых php и JavaScript, играемых на слух.Я изучу все, что нужно, чтобы сделать это хорошо.

Редактировать: В ответ на вопрос hamlin11: ячейки не имеют никакого отношения друг к другу в целом, за исключением того, что они гарантированно заполнят прямоугольную область.Вот (несовершенный) пример того, как они могут выглядеть без цветов:

Answer 1

Вы смотрели на jQuery Masonry ?

Answer 2

Если это просто рисование предварительно рассчитанных прямоугольников, я предлагаю использовать HTML 5 Canvas.

Вот пример , который показывает рисование прямоугольников

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

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<button onclick="draw_square();return true;">Red Square</button> 
<script>
  function draw_square() {
    var c1 = document.getElementById("c1");
    var c1_context = c1.getContext("2d");
    c1_context.fillStyle = "#f00";
    c1_context.fillRect(50, 50, 100, 100);
  }
 </script>

Ссылки

• Ссылка
• http://www.tutorialspoint.com/html5/canvas_drawing_rectangles.htm
• http://falcon80.com/HTMLCanvas/BasicShapes/Rectangle.html
• http://vombat.tumblr.com/post/255461929/draw-rectangles-with-canvas-tag-in-html5
  • Эта ссылка особенно полезна

Answer 3

Я бы использовал jQuery и либо jGrid , либо flexigrid

Answer 4

Проверьте http://www.gridsystemgenerator.com/ для 4 различных систем компоновки сетки на основе HTML + CSS.