安排下一堆叠到其他div元素 - Pinterest的或姿势风格

我想执行使用或随后在网站如Pinterest或Pose不管他们各自的分辨率为下一步安排到其它图像/ DIV的风格。我曾尝试安排彼此相邻这样安排下一堆叠到其他div元素 - Pinterest的或姿势风格

<div id="mainContainer"> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="differentHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
</div>

的CSS DIV：

#mainContainer { width:800px; } 
.sameHeightDiv{ float: left; width: 100px; height:190px; } 
.differentHeightDiv { float: left; width: 100px; height:225px; }

被安排像

1 2 3 4 
     5 
6 7 8

因为3'rd事业部（.differentHeightDiv）高度较大，我知道事情将工作，如果所有的高度相等，但我想要一个解决方案，如果它的不平等（我的意思是如果每个div有不同的分辨率/长宽比）有人请帮助我。

谢谢。

来源

2012-02-09 Wesley

+14

退房[砌体（http://masonry.desandro.com/）或[同位素（http://isotope.metafizzy.co/），他们做你在做什么试图去做。 – 2012-02-09 06:56:14

@ChristianVarga太棒了！感谢您的快速帮助。看起来JQuery Mansory是Pinterest和Pose所使用的。所以动画功能也带有正确的？ – Wesley 2012-02-09 07:03:52

这里是我的jquery插件，我写的建立与Pinterest相同的布局。 http://kayschneider.github.com/pinbox/ – 2012-11-19 19:36:37

这里是后面实现Pinterest的布局http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

来源

2012-05-21 12:27:50 superlogical

哇！一个教程是最好的，而不是盲目应用JQuery框架。非常感谢@superlogical – Wesley 2012-05-21 12:32:09

是的，很高兴知道它是如何工作的。不过，我会建议使用jQuery砌体或jQuery的同位素，因为它们具有的功能，你将需要如添加/从列表中删除动态项目和提供的排序顺序。 – superlogical 2012-05-21 15:05:51

是否有任何教程“Repin”弹出？ – rynhe 2012-12-11 06:21:53

的Airbnb刚刚开源infinity.js

Infinity.js基本的一个很好的教程是为Web一个UITableView：它的速度滚动通过长名单，并保持您的无限饲料平稳和稳定为您的用户。

ListView是一个容器，用于将内容移入和移出DOM上的滚动事件的。通过确保屏幕上一次不会有太多元素，ListViews有助于保持重新绘制昂贵页面的重绘时间（以及平滑滚动）。 ListViews在加速的超长复合HTML元素列表方面表现突出，其中新内容经常附加到最后的，现有内容很少被删除。

View a demo here

来源

2012-08-21 21:53:41 superlogical

但是这个屏幕响应？至少在演示部分我猜不？ – Wesley 2012-08-22 05:59:33

安排下一堆叠到其他div元素 - Pinterest的或姿势风格

回答

相关问题