浮动元素 - 网格中的问题

Question

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

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

http://jsfiddle.net/ppDp3/

Answer 1

用isotope修正了它。我首先让ImagesLoaded插件检查是否所有图像都已加载，然后我关闭同位素插件。代码如下所示。

// 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'
    });
  });
}