Gridview 浮动元素-网格中的问题

我正在创建一个网络商店，其中包含网格中的产品概述。它是一行中的三个产品，在产品图像下方有一个描述（或标题）。当他们都有相同的高度时，一切都完美无瑕。例如，当一行中的一个产品的标题较长，并且最终的高度不同时，下一行中的第一个产品将移动到屏幕的右侧，在其左侧留下两个空白点。然后，产品继续在下一行。如何避免这种情况

I've made a little demo to demonstrate my problem:

用修复了它。我首先让插件检查是否加载了所有图像，然后启动同位素插件。代码如下所示

// Generated by CoffeeScript 1.7.1
var product, products;

if ($('.products').length > 0) {
  products = $('.products');
  product = $('.product');
  products.imagesLoaded(function() {
    return products.isotope({
      itemSelector: '.product',
      layoutMode: 'fitRows'
    });
  });
}