CODEWITHSUNDEEP
jquerycsshtml
Wesley
Wesley

Reputation: 1808

Arrange Div elements stacked next to other - Pinterest or Pose style

I would like to implement the style used or followed for images/div arranged next to other in sites like Pinterest or Pose no matter what their individual resolution is. I have tried arranging div next to each other like this

<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:

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

Which is arranged like

1 2 3 4
      5
6 7 8

Because 3'rd Div (.differentHeightDiv) height is greater, i know things will work if all heights are equal but i want a solution if its unequal (i mean if each div has different resolutions/aspect ratios) Some one please help me on this.

Thanks.

Upvotes: 10

Views: 11227

Answers (2)

superlogical
superlogical

Reputation: 14950

Airbnb has just open sourced infinity.js

Infinity.js is a UITableView for the web: it speeds up scrolling through long lists and keeps your infinite feeds smooth and stable for your users.

A ListView is a container that moves content in and out of the DOM on the scroll event. ListViews help keep repaint times of expensive pages down (and scrolling smooth) by making sure that there are never too many elements onscreen at a single time. ListViews excel at speeding up long lists of complex HTML elements, where new content is frequently appended to the end and existing content is rarely removed.

View a demo here

Upvotes: 1

superlogical
superlogical

Reputation: 14950

Here is a nice tutorial on the basic's behind achieving the pinterest layout http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

Upvotes: 6

Related Questions