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

Question

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

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

Answer 1

你可以尝试使用/跳汰一个jQuery插件，像下面这样：

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

或

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

Answer 2

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

您可以使用masonry.js，isotope.js，或者更兼容的JS解决方案packery.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 3

如果你想使布局的“pintrest”的方式，你可以有x列的一个阵列，并通过每列重复检查最短的高度，并添加该列中的下一个框。

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