当 css float :left 时，Javascript 检查空格

Question

现在好吧..我真的不知道如何给这个标题。这是我的问题。我正在尝试创建一个页面，其中主体有一个类定义另一个 div 的宽度，即 baser。

我有一个 jQuery 脚本，可以检测窗口的宽度，并在之后为 body 提供一个类。例如，当窗口的宽度约为 900px 时 - body 将被赋予一个类 .col_6。

每张卡片的宽度为 150 像素，但当它们具有附加类 large 时，它们的宽度将为 300 像素。现在的问题是，根据 HTML 中 cards 的顺序，如果将 card.large 放置在只有 150px 宽的空间中，将会出现一些空白空间。然后卡片会自动跳转到下一行，并在上一行留出150px的空位。

我想知道的是 - 我可以在我的脚本中添加什么来选择顺序中稍后放置的 150px 宽的卡片并将其移动到空位或用 javascript 制作的 div 填充空位(例如其他目的)..

我希望您能够通过阅读本文来解决我的问题。我制作了一个 jsfiddle 来显示我的代码和问题。您可以尝试在阅读 fiddle 时调整窗口大小。它将向您展示有时会如何看到空白空间。

http://jsfiddle.net/EK8q2/4/

这是我的 javascript/jQuery 如果它可以帮助你..

$(document).ready(function() {
    winResize(window.innerWidth);
});

$(window).resize(function() {
    winResize(window.innerWidth);
    // Room for more functions
});

function winResize(w) {
    resizeBaser(w);
    // Room for more functions
}

function resizeBaser(w) {
    var index = Math.min(10, Math.floor(w / 150));
    if (index > 0) {
        $('body').alterClass('col_*', 'col_' + index);
    }
}

Answer 1

我看到的算法是这样的:

1. 附加到加载/滚动/调整大小事件:

   $(window).on('加载滚动调整大小', function () {

   });

2. 在那里，将 $('.card') 元素分组到行数组中。

类似于:

var rowsObj = {}, rows = [];
$('.card').each(function(){
  var el = $(this), 
    pos = el.position(), 
    currentRow = rowsObj[pos.top] || (rowsObj[pos.top] = []);
  currentRow.push(el);
});
$.each(rowsObj, function(k, v) {
  if (/^\d+(\.\d+)?$/.test(k)) {
    rows.push(v);
  }
});
// rows now contains array of arrays of $-ed elements

3.然后我会从头到尾枚举行并尝试识别所有孤立卡(条件:单个最窄的卡) - 有了这些，我会从上到下搜索并尝试找到可能的新行(即最后一个)该潜在行的元素)和orphan.insertAfter(thatElement)。插入后，我将从数组中排除两行(一行包含孤立行，另一行包含不完整行)。一直这样做，直到无法形成对(孤儿-不完整)。

4.然后我会考虑如何将这个逻辑扩展到比单张卡更大的宽度。