按位置分组元素

Question

一个#gal容器装载了大量图像（~60），所有图像都有定义的CSS高度（100px）和边距5px;

现在，从逻辑上讲，图像宽度可能会有所不同，当所有图像都可见时，我们无法计算相同数量的图像 - 每个'线'，因为如果没有空间可用以适合#gal宽度，它们都会向下浮动：

| ___ __ _____ _ | <--- the #gal with images inside
| __ ______      |
| ______ _ __ __ |
| __ ______      |
| _______ ____ _ |

如何通过q​​azxswpoiing将它们分成DIV，将第一行（第二......第三......）中的所有图像分组？

所以这是第一个想法： - 在页面加载和图像定位后 - 我们可以通过其wrap()对所有图像进行分组：

.position().top

5  5  5  5
120 120
245 245 245 245 
380 380
525 525 525

任何的想法？

Answer 1

尝试这样的事情：

EXAMPLE

小提琴：

var div = $('<div />'); // The current working div
var pos = $('#gal img').position().top; // The position of the first image

$('#gal img').each(function(){
    // If the next image has a different position from the one before it
    // then add the working div to #gal and create a new working div.
    if (pos != $(this).position().top) {
        $('#gal').append(div);
        div = $('<div />');  
    }

    // Append a cloned copy of the image to the working div.
    // This is important: we don't want to move the image
    // because it will reflow the other images and mess up
    // the rows.
    div.append($(this).clone());

    // Set the new position
    pos = $(this).position().top;
});

// Now remove all of the old images
$('#gal > img').remove();

Answer 2

你可以尝试这样的事情：

http://jsfiddle.net/PuqZe/1/

它将包装div中包含相同位置顶部的所有图像。

Answer 3

这样做：

var groups = {};

$('#gal img').each(function(){
    var pos = $(this).position().top;
    if(typeof groups[pos] == 'undefined')
    {
        groups[pos] = [];
    }
    groups[pos].push(this);
});

$.each(groups, function (pos, elements) {
    $('#gal').append('<div id="wrapper_'+pos+'" class="wrapper"></div>');
    var wrapper = $('#gal #wrapper_'+pos);
    $.each(elements, function () {
        wrapper.append(this);
    });
});

http://jsfiddle.net/ebiewener/kr57a/2/

我们循环两次图像。第一次获取它们的位置，将其作为属性存储在HTML元素对象（el [0]）上。第二个循环进行包装。我们需要两个循环的原因是因为包装会影响同一行中其他未包装元素的位置，导致它们不会被该行中的第一个元素包裹。

Answer 4

• 创建一个使用

  var gal = $('#gal');
  
  gal.children('img').each(function(){
      var el = $(this);
      el[0].Pos = el.position().top;
  })
  .each(function(){
      var el = $(this);
      var rowWrapper = gal.children('.group' + el[0].Pos);
      if(rowWrapper.length === 0){
          el.wrap('<div class="wrapper group' + el[0].Pos + '"></div>');
      }else{
          el.appendTo(rowWrapper);
      }
  });

  返回".wrapper"元素的函数。
• 在单个循环内部检查jQuery's Object Element creator元素位置是否大于当前的位置。 如果为true，则使用.next()将$wrap()函数传递给last-known-index到当前索引+ 1范围内的一组元素。
• 将生成的包装元素插入到数组中，一旦完成工作，将该数组附加到.slice()父级。

#gal

const wrapGalImg = () => {

  const $el = $('#gal img'),
    $wrap = ($ch) => $('<div>', {'class':'wrapper', append:$ch}),
    wraps = []; // Array of wrapper elements with children
  let i = 0;

  $el.each((ei, ele) => {
    const $next = $(ele).next();
    if($next[0] && $next.position().top == $(ele).position().top) return;
    wraps.push($wrap($el.slice(i, ei+1)));
    i = ei+1;
  });
  
  $('#gal').append( wraps ); // Append all wrappers. Once.

}

$(window).on('load', wrapGalImg);

*{margin: 0;}

#gal img {
  vertical-align: top;
  height: 60px;
}

.wrapper {
  background: #f00;
  margin: 1px 0;
}

---

因此，不需要多个循环，克隆或删除元素。