如何使用CSS创建像网格一样的Pinterest [Twitter Bootstrap]

Question

在这里，我试图让Pinterest像网格一样。我正在使用bootstrap列网格布局。我想为这些列应用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