Masonry JS-如何在第二行中居中网格元素

Question

我正在使用此站点：http://genesis.ecoverbuddy.com/

我将砖石用于响应功能的电子商务产品类别。现在，我需要使第二行浮动在中间。

问：什么是最好的实现方法？如果将响应功能保持在较小的屏幕尺寸上，那就太好了。

这是我的jquery代码：

jQuery(window).on('load', function(){ 
var $ = jQuery;
/*  Masonry */
var $container = $('.woo-cat ul.products');
// initialize
    $container.masonry({
          columnWidth:10, 
          itemSelector: '.product-category', 
          isAnimated: true,
          isFitWidth: true
    });
$container.masonry('reloadItems'); 
});

Answer 1

最佳实施方式？完全不使用砖石结构，只需使用CSS。您很幸运，因为所有图片均为300x300。石工通常用于最好地将各种尺寸的物品布置在网格中，并且传统上漂浮方式使它们笨拙地布置。

响应和居中的简单示例在这里：

http://jsfiddle.net/aF7tP/

* { margin:0; padding:0; }
ul { list-style: none; text-align: center; font-size: 0;}
li { display: inline-block; font-size: 24px; position: relative; padding: 8px;}
img { display: block; margin: 0 auto; }
span { position: absolute; bottom:8px; left:8px; right:8px; padding: 8px; background: rgba(0,0,0,0.4); color: #fff; }

您的确切CSS将完全由您想要的决定，但不要错过重点-不要使用Masonry，它对于您的特定要求是不必要的（有害的）。