马赛克样式的图像网格，浮动和边距

Question

我的主页是一系列小图像（用于导航），这些图像排列成一个完美的矩形。

我的计划最初是使用<ul>并创造性地使用了float和margin但是我不再确定这是最佳选择。

实现此效果的最简单方法是什么？

<div class="home-nav">
   <ul>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">weddings</a></li>
      <li><a href="#">portraits</a></li>
      <li><a href="#">contact</a></li>
   </ul>
</div><!-- end home-nav -->

Answer 1

您可以使用JavaScript插件，例如Masonry ， Isotope或简单有效的Wookmark jQuery插件 （我个人最喜欢的插件 ）。 但是，对于这样一个简单的布局，可能不值得增加开销。

我认为使用float:left在正确的轨道上。 但是，您需要将左上角的两个框组合在一起，以在不使用JavaScript的情况下获得所需的效果。

另外，由于这实际上不是列表 ，因此我将使用HTML5 <nav>标记代替<ul>和<li> 。 单击此处以查看下面的代码的工作示例。

HTML

<nav>
  <div>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  <div>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
</nav>

CSS

nav {
  width: 315px;
}
nav a {
  float: left;
  background-color: gray;
}
nav div:nth-child(1) {
  float: left;
  width: 100px;
}
nav div:nth-child(1) a:nth-child(1) {
  width: 100px;
  height: 50px;
  margin: 0 5px 5px 0;
}
nav div:nth-child(1) a:nth-child(2) {
  width: 100px;
  height: 50px;
  margin: 0 5px 0 0;
}
nav div:nth-child(2) a:nth-child(1) {
  width: 50px;
  height: 105px;
  margin: 0 5px 0 5px;
}
nav div:nth-child(2) a:nth-child(2) {
  width: 155px;
  height: 105px;
}
nav div:nth-child(2) a:nth-child(3) {
  width: 155px;
  height: 105px;
  margin: 5px 5px 0 0;
}
nav div:nth-child(2) a:nth-child(4) {
  width: 155px;
  height: 105px;
  margin: 5px 0 0 0;
}

我倾向于以最小的HTML标记为代价，而以更复杂的CSS为代价，这就是为什么我广泛使用:nth-child ，但是您可以使用类名来达到相同的效果。

Answer 2

这种类型的布置是通过装箱算法自动完成的。 有几种JavaScript库可以做到这一点，最受欢迎的是Isotope