Responsive Pinterest-style Layout Plugin For Bootstrap - Bootstrap-waterfall
File Size: | 2.77 MB |
---|---|
Views Total: | 8658 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery plugin to render a responsive, dynamic, fluid, AJAX-enabled grid layout as you seen in Pinterest.com, based on Bootstrap's List group component.
Installation:
# NPM $ npm install bootstrap-waterfall # Bower $ bower install bootstrap-waterfall
How to use it:
1. Load the Bootstrap's stylesheet in the header of the webpage.
<link rel="stylesheet" href="bootstrap.min.css">
2. Add your 'Pins' as list groups to the waterfall layout.
<div class="waterfall"> <ul class="list-group"> <li class="list-group-item"> <a href="#"> <img src="1.jpg"> </a> </li> </ul> <ul class="list-group"> <li class="list-group-item"> <a href="#"> <img src="2.jpg"> </a> </li> </ul> <ul class="list-group"> <li class="list-group-item"> <a href="#"> <img src="3.jpg"> </a> </li> </ul> ... </div>
3. Load jQuery library and the jQuery Bootstrap-waterfall's script at the end of the html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="bootstrap-waterfall.js"></script>
4. Call the function on the top container to initialize the waterfall layout.
$('.waterfall').waterfall();
5. Style the 'Pins' according to your needs.
.waterfall .list-group { margin-right: 14px; } .waterfall .list-group > li:first-child { padding: 0; background-color: white; } .waterfall .list-group > li:first-child img { width: 100%; border-top-right-radius: 4px; border-top-left-radius: 4px; } .waterfall .list-group > li { background-color: #f5f5f5; } @media (min-width: 768px) { .waterfall .list-group { width: 346px; } } @media (min-width: 992px) { .waterfall .list-group { width: 299px; } } @media (min-width: 1200px) { .waterfall .list-group { width: 271px; } }
Changelog:
v0.2.7 (2018-06-07)
- Ajax supported.
- If img is 404, the img loader will never stop.
- Fix the wrong passed in param when run new Pin, which will break the check of img loaded.
- Now we can use addPins to add new pins.
- Load image into task list once the image is loaded, otherwise the waterfall breaks.
2017-05-08
- v0.2.6
This awesome jQuery plugin is developed by Mystist. For more Advanced Usages, please check the demo page or visit the official website.