图像库 - Pinterest的布局与CSS？ [英] Image gallery - Pinterest like layout with CSS?

问题描述

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

I'm working on a dynamic php gallery. The thumbnails will all have the same width but various heights. They'll be placed from left to right. So, I don't want to use a five columns pattern. I guess it's not possible to do it only with CSS, so maybe you know any jquery script that would do the job? I guess this kind of gallery pattern is quite common...

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

推荐答案

这里纯css解决方案使用css3列。这在旧版浏览器中无效，请在此处阅读（点击）。 在此演示（点击）

Here's the pure css solution using css3 columns. This isn't going to work in older browsers, read here (click). Live demo here (click).

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

You can use masonry.js, isotope.js, or packery.js for more compatible js solutions.

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

这篇关于图像库 - Pinterest的布局与CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！