浮动元素 - 网格中的问题答案

【问题标题】：floating elements - issues in grid浮动元素 - 网格中的问题
【发布时间】：2014-06-25 07:52:11
【问题描述】：

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

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

http://jsfiddle.net/ppDp3/

【问题讨论】：

标签： gridview grid css-float floating

【解决方案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'
    });
  });
}

【讨论】：