Как создать Pinterest как сетку с CSS [Twitter Bootstrap]

Question

Здесь я пытаюсь получить Pinterest как сетку. Я использую раскладку столбцов бутстрапа. Я хочу применить сетку стиля Pinterest для этих столбцов. Я уже добавил CSS, чтобы это произошло, но я получаю столбцы, отрубленные, как показано ниже. Для этого не используется jQuery. Как я могу заставить новый элемент начинать с вершины и избегать того, что элемент измельчается?

HTML

<div class="row listpage-row masonry-container product-list"> 

    <div class='col-xs-10 col-sm-4 col-md-3 col-lg-3 shop-item'> 
    <div class='panel panel-warning'> 
     <div class='panel-body'> 
     <a href="product-description.php?product_id=3"> 
      <br> 
      <br> 
      <img class='product_listing_img img-responsive' src=files/uploaded_images/Numark.jpg> 
      <br><a href="product-description.php?product_id=3" class="productname">Numark Ns7Ii 4-Channel Motorized Dj Controller And Mixer</a> 
      <br> 
      <br> 
     </a><span class='price'>&#8377;24000/-</span> 
     <h4><span>&#8377;<strike class='maxprice'>119852</strike></span></h4><span class='owners'>8 of 0 owners reached</span><a href='mycart.php?action=add&product_id=3' class='buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12'><span class='glyphicon glyphicon-shopping-cart'></span> Add to cart</a> 
     </div> 
    </div> 
    </div> 

    <div class='col-xs-10 col-sm-4 col-md-3 col-lg-3 shop-item'> 
    <div class='panel panel-warning'> 
     <div class='panel-body'> 
     <a href="product-description.php?product_id=4"> 
      <br> 
      <br> 
      <img class='product_listing_img img-responsive' src=files/uploaded_images/yamaha.jpg> 
      <br><a href="product-description.php?product_id=4" class="productname">Yamaha 01V96i Digital Mixer</a> 
      <br> 
      <br> 
     </a><span class='price'>&#8377;88630/-</span> 
     <h4><span>&#8377;<strike class='maxprice'>227900</strike></span></h4><span class='owners'>4 of 1 owners reached</span><a href='mycart.php?action=add&product_id=4' class='buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12'><span class='glyphicon glyphicon-shopping-cart'></span> Add to cart</a> 
     </div> 
    </div> 
    </div> 

    <div class='col-xs-10 col-sm-4 col-md-3 col-lg-3 shop-item'> 
    <div class='panel panel-warning'> 
     <div class='panel-body'> 
     <a href="product-description.php?product_id=5"> 
      <br> 
      <br> 
      <img class='product_listing_img img-responsive' src=files/uploaded_images/3b8b57e428a568786e411c3fa09b6a3e.jpg> 
      <br><a href="product-description.php?product_id=5" class="productname">Brother P Touch Label Printer</a> 
      <br> 
      <br> 
     </a><span class='price'>&#8377;2181/-</span> 
     <h4><span>&#8377;<strike class='maxprice'>6000</strike></span></h4><span class='owners'>8 of 0 owners reached</span><a href='mycart.php?action=add&product_id=5' class='buy-button btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12'><span class='glyphicon glyphicon-shopping-cart'></span> Add to cart</a> 
     </div> 
    </div> 
    </div> 

</div> 

CSS:

.listpage-row { 
    -moz-column-width: 15em; 
    -webkit-column-width: 15em; 
    -moz-column-gap: 0.5em; 
    -webkit-column-gap: 0.5em; 
} 
.shop-item { 
    display: block; 
    padding: 0.1rem; 
    width: 100%; 
} 

Answer 1

Зафиксировать высоту панели с помощью пользовательских CSS:

.panel-body{ 
    height:350px; 
} 

посмотреть на this fiddle