Mansory

Masonry usado com o class .masonry como container e .masonry-item como os itens. Já para quem usa o front-end framework bootstrap grid é recomendado usar o class .container-fluid para um melhor resultado. Veja o exemplo usando grade do bootstrap:

<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>

Alguns recursos também são possíveis através do mosonry (organização, filtros e pesquisa) e isso é fácil.

Organizando por

O melhor é usar o elemento input (recomendado usar input radio), é necessario usar os atributos e seus valores name="masonry-sort", data-masonry-target="#masonry-id", data-sort-attr="attr-name" e value="ValorOp" (ValorOp: false, asc, desc). É recomendado que o valor do atributo data-sort-attr seja .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>

Filtrando por

É melhor, neste caso, usar o elemento input (recomendado usar input radio), e é necessário os atributos e seus valores name="masonry-filter", data-masonry-target="#masonry-id" e value="filter-value". Também é recomendado usar o valor .masonry-item no atributo data-filter="filter-value".

<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>

Pesquisando por

Veja o exemplo do template abaixo usando masonry para pesquisas (os atributos existentes são suficientes).

<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>

Ver demostração