How can we achieve the fixed width and variable height in a grid layout, exactly like www.pinterest.com homepage layout. I think they are using Javascript. just wondering whether there are other approaches. simply using the float:left will not work. thanks for any help.
Add a comment
|
2 Answers
May be you can use css3 cloumn-count property as an alternative. Like this:
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
Read this article http://css-tricks.com/seamless-responsive-photo-grid/
Check this for example http://jsfiddle.net/pMbtk/55/
The easiest option is to use the jQuery Masonry plugin.
If you want to do it via CSS only, you have to float large, equal width columns and then add your variable height elements within them.
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
And the CSS would look like so:
.parent {
float: left;
width: 200px; /* adjust as needed */
}
.child {
/* these are variable height */
}
3 Comments
bingjie2680
thanks for your script. one problem is that the height for each child is varing. so if say, in the first column, all children are relative heigher than those in other columns, then the first column will be much longer than the others, which does not look pretty. :)
Pat
That's where javascript could come in handy again. Onload, you could check the heights of the different columns and move
.child elements around so that all columns were approximately equal. Mind you, if you're going to do that, might as well use something pre-built. Another lib similar to masonry is isotope: isotope.metafizzy.cobingjie2680
good trick. we at last decide to go with our own script. thanks for the tips and great reference.:)