Question

我正在开发一个动态的php库。缩略图将具有相同的宽度但不同的高度。它们将从左到右放置。所以，我不想使用五列模式。我想这不可能只用CSS做，所以也许你知道任何jquery脚本可以完成这项工作吗？我想这种画廊模式很常见......

http://i.stack.imgur.com/Xwdx0.png

Answer 1

这是使用css3列的纯css解决方案。这在旧版浏览器中不起作用，read here (click). Live demo here (click).

您可以使用masonry.js，isotope.js或packery.js获得更兼容的js解决方案。

<div class="col-5">
  <div class="sm"></div>
  <div class="lg"></div>
  <div class="sm"></div>
  <div class="sm"></div>
  <div class="lg"></div>

  <div class="lg"></div>
  <div class="sm"></div>
  <div class="lg"></div>
  <div class="lg"></div>
  <div class="lg"></div>  
</div>

的CSS：

.col-5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

.col-5 > div {
  display: inline-block;
}

.sm {
  height: 75px;
}
.lg {
  height: 125px;
}

Answer 2

您可以尝试使用/ jigging Jquery插件，如下所示：

http://codecanyon.net/item/jquery-tiles-gallery/2281417

或

http://codecanyon.net/item/jbmarket-image-gallery/full_screen_preview/3028128?ref=lamdang

Answer 3

如果您尝试将布局设为'pintrest'方式，则可以使用x列数组并遍历每列以检查最短高度，并添加该列中的下一个框。

这样你会知道它适用于所有浏览器[除非它们已禁用js]，然后你可以设置列的宽度样式。

图片库 - Pinterest喜欢用CSS布局？

3 个答案: