像引导柱一样的砌体被砍掉了

Question

这里我正在尝试使用像布局一样的pintrest。这里我使用bootstrap列网格在页面中显示结果。

当我添加我的CSS时，我能够获得布局，但div列在结尾处被砍掉

这是我的代码

的CSS：

row {
 -moz-column-width: 16em;
 -webkit-column-width: 16em;
 -moz-column-gap: 0.21em;
 -webkit-column-gap:0.21em; 

}

.item {
 display: inline-block;
 padding:  0.1rem;
 width:  100%; 
}

HTML：

<div class='col-xs-12 col-sm-4 col-md-3 col-lg-3 item'>
<div class='panel panel-warning'><div class='panel-heading'>Numark Ns7Ii 4-Channel Motorized Dj Controller And Mixer</div>
<div class='panel-body'><span class='price'>Walden: &#8377; 24000/-</span>
<a href="product-description.php?3"><br><br><img class='product_listing_img img-responsive' src=files/uploaded_images/Numark.jpg><br></a>
<h4>MRP: <span>&#8377;<strike>119852</strike></span></h4><a href='#' 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>

这是我得到的输出

你可以看到第2和第3列项目被切入顶部

我该如何解决这个问题？