Question

好的，现在......我真的不知道如何给这个冠军。这是我的问题。我正在尝试创建一个页面，其中正文有一个类定义另一个div a.k.a baser的宽度。

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

每张卡的宽度为150像素，但当他们有额外的等级large时，它们的宽度为300像素。现在的问题是，根据HTML中cards的顺序，如果card.large应放置在仅150px宽的空间中，则会有一些空格。然后卡会自动跳转到下一行，并在前一行留下150px的空白区域。

我想知道的是 - 我可以添加到我的脚本中，或者选择在订单后面放置的150px宽卡，并将其移动到空白处或用javascript制作的div填充空白点（用于其他目的）..

我希望你能通过阅读这个来弄清楚我的问题..我已经制作了一个显示我的代码和问题的jsfiddle。您可以在阅读小提琴时尝试调整窗口大小。它会告诉你有时会看到一个空的空间。

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

我认为算法就是这样：

附加到load/scroll/resize个事件：

$（window）.on（'load scroll resize'，function（）{

}）;
在那里，将$('.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.然后我想到如何将这个逻辑扩展到大于单卡的宽度。

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

1 个答案: