me

Masonry used with .masonry as a container and .masonry-item as a item(s). Fully support with bootstrap grid (recomended to use .container-fluid for best results). Below is Example using bootstrap grid:

<div class="container-fluid">
  /* attribute id just used for targeting if you use masonry with feature(s) */
  <div class="row masonry" id="masonry-sample"> 
    <div class="col-md-6 masonry-element">...</div>
    <div class="col-md-3 masonry-element">...</div>
    <div class="col-md-3 masonry-element">...</div>
    <div class="col-md-3 masonry-element">...</div>
    <div class="col-md-3 masonry-element">...</div>
    <div class="col-md-6 masonry-element">...</div>
  </div>
</div>

GOOD NEWS: We are also add some features to masonry (Sorting, Filtering and Searching) that can be used easily. See best practice using masonry features on Gallery Page.

Sorting

Best use on input element (recomended using input radio), with required name="masonry-sort", data-masonry-target="#masonry-id", data-sort-attr="attr-name" and value="optValue" (optValue: false, asc, desc). Required add data-sort-attr value as an attribute on .masonry-item.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="masonry-filter" data-masonry-target="#masonry-sample" value="false" checked> View all
  </label>
  <label class="btn btn-default">
    <input type="radio" name="masonry-filter" data-masonry-target="#masonry-sample" data-sort-attr="data-name" value="asc"> Large
  </label>
  <label class="btn btn-default">
    <input type="radio" name="masonry-filter" data-masonry-target="#masonry-sample" data-sort-attr="data-name" value="desc"> Medium
  </label>
</div><!--/btn-group-->

<div class="container-fluid">
  <div class="row masonry" id="masonry-sample"> 
    <div class="col-md-6 masonry-element" data-name="lorem">...</div>
    <div class="col-md-3 masonry-element" data-name="ipsum">...</div>
    <div class="col-md-3 masonry-element" data-name="dolor">...</div>
  </div>
</div>

Filtering

Best use on input element (recomended using input radio), with required name="masonry-filter", data-masonry-target="#masonry-id" and value="filter-value". Also required data-filter="filter-value" on .masonry-item.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default">
    <input type="radio" name="masonry-filter" data-masonry-target="#masonry-sample" value="all" checked> View all
  </label>
  <label class="btn btn-default">
    <input type="radio" name="masonry-filter" data-masonry-target="#masonry-sample" value="filter1"> Large
  </label>
  <label class="btn btn-default">
    <input type="radio" name="masonry-filter" data-masonry-target="#masonry-sample" value="filter2"> Medium
  </label>
</div><!--/btn-group-->

<div class="container-fluid">
  <div class="row masonry" id="masonry-sample"> 
    <div class="col-md-6 masonry-element" data-filter="filter1">...</div>
    <div class="col-md-3 masonry-element" data-filter="filter2">...</div>
    <div class="col-md-3 masonry-element" data-filter="filter1">...</div>
  </div>
</div>

Searching

See example template below for used masonry with searching (the existing attributes is required).

<form action="#" role="form" name="masonry-search">
  <div class="input-group input-group-in">
    <input type="text" class="form-control" name="masonry-search" data-search-attr="data-tags" data-masonry-target="#masonry-sample" placeholder="Search item..." >
    <span class="input-group-btn">
      <button class="btn btn-default" data-toggle="masonry-search-submit"><i class="fa fa-picture-o"></i></button>
      <button class="btn btn-default hide" data-toggle="masonry-search-clear" data-masonry-target="#masonry-sample"><i class="fa fa-times"></i></button>
    </span>
  </div>
</form>

<div class="container-fluid">
  <div class="row masonry" id="masonry-sample"> 
    <div class="col-md-6 masonry-element" data-tags="lorem, ipsum, dolor">...</div>
    <div class="col-md-3 masonry-element" data-tags="sit, amet">...</div>
    <div class="col-md-3 masonry-element" data-tags="dolor, amet">...</div>
  </div>
</div>
1
4
6
3
7
2
5