 |
| Pinterest Responsive Waterfall Grid Layout Style with JavaScript |
A pure JavaScript solution used to create a responsive, fluid waterfall grid layout as you see on Pinterest.com
How to use it
1. Load the responsive_waterfall.js JavaScript library at the end of the document.
<script src="responsive_waterfall.js"></script>
2. Create a grid layout following the Html structure like this.
Title 1
Content Here
Title 2
Content Here
...
Title 3
Content Here
3. Custom CSS styles for the grid layout.
.wf-container {margin: 0 auto}
.wf-container:before,
.wf-container:after {
content: '';
display: table
}
.wf-container:after {clear: both}
.wf-box {margin: 10px}
.wf-box img {
display: block;
width: 100%
}
.wf-box .content {
border: 1px solid #ccc;
border-top-width: 0;
padding: 5px 8px
}
.wf-column {float: left}
4. Make the grid layout responsive using CSS3 media queries.
@media screen and (min-width: 768px) {
.wf-container {width: 750px}
}
@media screen and (min-width: 992px) {
.wf-container {width: 970px}
}
@media screen and (min-width: 1200px) {
.wf-container {width: 1170px}
}
5. Initialize the grid layout and done.
// use querySelector/querySelectorAll internally
var waterfall = new Waterfall({
containerSelector: '.wf-container',
boxSelector: '.wf-box',
minBoxWidth: 250
});
Live Demo
See the Pen Pinterest Responsive Fluid Grid Layout with JavaScript by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- responsive_waterfall-master.zip
- Size :
- 6.90KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT