最智能的方式来编码这些磁贴系统

Question

目前我正在开发一个网站，其中包含多个这些平铺系统，您可以在下面看到。

我想知道哪种方式最好对它们进行编码。

我使用的是非常好的Masonry，但它是一个基于jQuery的解决方案。 http://jsfiddle.net/xfxYQ/

HTML

<div class="box-container">
    <article class="box span-1x1">1</article>
    <article class="box span-1x1">2</article>
    <article class="box span-2x2">3</article>
    <article class="box span-1x1">4</article>
    <article class="box span-1x1">5</article>
    <article class="box span-2x2">6</article>
    <article class="box span-1x1">7</article>
    <article class="box span-1x2">8</article>
    <article class="box span-1x1">9</article>
</div>  

CSS

.box-container {
    width: 240px;
    margin-bottom: 50px;
    background: blue;
}

.box {
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    background: red;
}

.span-1x1 {
    width: 50px;
    height: 50px;
}

.span-1x2 {
    width: 50px;
    height: 110px;
}

.span-2x1 {
    width: 110px;
    height: 50px;
}

.span-2x2 {
    width: 110px;
    height: 110px;
}

Masonry jQuery

var $container = $('.box-container');

$container.masonry({
    itemSelector: '.box'
});

有没有人对纯HTML / CSS解决方案有明智的想法？

Answer 1

有很多CSS网格框架，旨在创建这样的东西。

960.gs 也是一个基于CSS的网格框架。它没有Javascript，所以你可以看看 在它的架构上甚至使用那个。

如果你想要一些动画或某些东西，你可以使用CSS3为它制作动画，如果你真的没有 想在其中使用任何Javascript（我也不愿意）。

祝你好运。

Answer 2

您肯定必须将HTML分解为列。基本上这将需要重写HTML相当多。例如，在此jsFiddle中：

<div class="box-container cf">
  <div class="column">
    <div class="box span-1x2">0</div>
  </div>
  <div class="column">
    <div class="box span-1x1">1</div>
    <div class="box span-1x1">2</div>
  </div>
  <div class="column">
    <div class="box span-2x2">3</div>
  </div>
</div>