每日一讲：masonry响应式页面布局---入门实例

masonry 是一个布局插件，实现网格布局，也可叫栅格布局，更为形象的也可叫砖块布局。另外、masonry还支持响应式设计，它会根据浏览器窗口(或分辨率)的大小动态调整布局，使其达到当前尺寸下的最佳浏览效果。

masonry 的布局是由大大小小的砖块组成。布局的过程实质就是排列砖块的过程。

如上图所示，就是一个最简单的砖块布局，由大小相同的砖块组成，整个屏幕很像一面墙，由砖块码成。另外为了叙述方便，下文都采用砖块布局这个称呼。

对于每个砖块，masonry 规定：宽度必须一致，高度可以不同。

官网地址：http://masonry.desandro.com/index.html

下载地址：http://masonry.desandro.com/jquery.masonry.min.js

入门实例

下面我们做个简单的入门实例：

<script src="js/jquery-1.8.1.js"></script>
<script src="js/jquery.masonry.min.js"></script>

需要引入的文件。另外，jquery 的版本必须大于1.6。

.box {
  width: 120px;
  margin:5px;
  padding:5px;
  float: left;
  background:#D8D5D2;
}

定义砖块样式，主要定义砖块宽度，另外还需将其变为浮动的。注意：这里定义的宽度并非是砖块的宽度，而是砖块里装的东西的宽度。砖块的宽度下边会通过参数设置。

<div id="container">
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
</div>

定义一个布局的容器，这个必须有，所有的砖块必须在这个容器中。为啥要有容器，会在下篇中详细说。

样式、结构描述都准备好后，下面就启动布局。

$('#container').masonry({
          itemSelector : '.box',
          columnWidth : 140
       });

通过$(容器).masonry()方法。其中，可传入定制参数。itemSelector设置砖块的css样式，就是上面定义的box，columnWidth设置砖块的宽度。

好的，已经完成，下面你就可以手动拖动浏览器调整屏幕大小，来体验下masonry的响应式了。

另外注意：参数columnWidth的宽度必须大于或等于.box中定义的总宽度(margin-left + border-left + padding-left + width + margin-right+ border-right + padding-right )，也就是我们经常说的css盒子模型的总宽度。

效果：

如何跨列(合并砖块)

上面的实例是个入门的最简单的情况，即所有砖块的宽度都是一样的，这是masonry的强制规定。那么，如果我们想合并列来完成复杂的页面布局应该如何做那，就像下面：

上面说过，columnWidth的宽度必须大于或等于.box中定义的总宽度，如果某个砖块的宽度超过了columnWidth设置的宽度，就会产生跨列，masonry会将相邻的砖块的空间给它，以满足它的宽度要求。

根据这个原理，我们就可以实现合并单元格的功能。

.box {
  width: 120px;
  margin:5px;
  padding:5px;
  float: left;
  background:#D8D5D2;
}
#container .col2 { width: 260px; }
#container .col3 { width: 400px; }

定义了俩个和并列的宽度，.col2合并俩列，.col3合并三列。

<div id="container">
  <div class="box col2" ><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
  <div class="box"><p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p></div>
</div>

让第1个砖块占俩列。

效果图：

+友情链接