Responsive Pinterest-style Layout Plugin For Bootstrap - Bootstrap-waterfall

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.