1

现在好了..我真的不知道如何给这个标题。这是我的问题。我正在尝试制作一个页面，其中 body 有一个定义另一个 div aka 宽度的类baser。

我有一个 jQuery 脚本，它检测窗口的宽度并在以后给出body一个类。例如，当窗口的宽度约为 900 像素时 -body将被赋予一个类.col_6。

每张卡片的宽度为 150 像素，但当它们有额外的类时，它们large的宽度将是 300 像素。现在的问题是，根据 HTML 中的顺序，如果 a应该放置在仅 150 像素宽的空间cards中，将会有一些空白空间。card.large然后卡片会自动跳转到下一行，并在上一行留出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);
    }
}
4

1 回答 1

1

我看到的算法是这样的：

  1. 附加到load/scroll/resize事件：

    $(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.然后我会考虑如何将此逻辑扩展到大于单卡的宽度。

于 2013-06-24T16:25:02.927 回答