javascript - 自动高度网格

Question

我的电子商店 (http://shop.rukahore.sk/) 上有一个产品网格。每个产品 div 都是 222px x 222px，但我希望它具有自动高度。

我试过这样的东西 - http://patterntap.com/code/stacking-columns-layout-masonry , 但我不得不添加最小高度，但它看起来不太好，因为一些图像变小或变大了，而且包装 div 仍然是 222 像素，由于悬停效果等原因，我不希望发生这种情况。

有人可以就此提供建议吗？

Answer 1

好吧，要使用该页面中显示的显示，您需要使用插件

<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->

如果你不想添加更多的插件......好吧，让你失去高度的是float css属性。您应该使用其他东西来制作网格，例如在 www.camarasdecolores.com 中查看他们是如何做的。

添加 Masonry 插件:

给你的容器添加一个id:

<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;">

在脚本中添加初始化js代码

$(window).load(function(){
  $('#masonryContainer').masonry({  
    itemSelector: '.hp-product',
    columnWidth: 60
  });  
}); 

改变一些CSS:

#masonryContainer { width: 0 auto; }

.hp-product {
    width: 180px; float: left;  
}
.hp-product-img {

}
.hp-product-img img {
    max-width: 100%;
    height: auto;
    }
//Void the following ones
    .hp-products {
    }
    .allposts {
    }
    .allposts .hp-product {
    }