jquery - 编码这些瓷砖系统的最聪明的方法

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;
}

砌体 jQuery

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

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

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

Answer 1

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

960.gs 也是一个基于 CSS 的网格框架。它没有 Javascript int，因此您可以查看它的架构，甚至可以使用它。

如果你想要一些动画或其他东西，如果你真的不想在其中使用任何 Javascript（我也不喜欢），你可以使用 CSS3 对其进行动画处理。

祝你好运。

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>