Группировать элементы по позиции

Question

A #gal контейнер загружен множеством изображений (~ 60), все с определенной высотой CSS (100px) и полем 5px;

Теперь, по логике, ширина изображений может изменяться, и, когда все изображения видны, мы не можем посчитать одинаковое количество изображений на каждую линию, так как все они смещены вниз, если нет места для ширины #gal :

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

Как сгруппировать все изображения в первой строке (вторая ... третья ...), wrap() вставив их в DIV?

Итак, вот первая идея: - после загрузки страницы и размещения изображений - мы можем сгруппировать все изображения по .position().top:

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

Пример

Есть идеи?

Answer 1

Попробуйте что-то вроде этого:

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();

Скрипка: http://jsfiddle.net/PuqZe/1/

Answer 2

Вы можете попробовать что-то вроде этого:

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);
    });
});

Это обернет все изображения с одинаковым верхом в div обертки.

Answer 3

Это будет сделано: http://jsfiddle.net/ebiewener/kr57a/2/

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);
    }
});

Мы перебираем изображения дважды. Первый раз получает свою позицию, сохраняя ее как свойство объекта HTML-элемента (el [0]). Второй цикл выполняет перенос. Причина, по которой нам нужны два цикла, заключается в том, что перенос может повлиять на положение других развернутых элементов в одной строке, в результате чего они не будут переноситься с первым элементом в этой строке.

Answer 4

• Создайте функцию, которая возвращает элемент ".wrapper", используя jQuery's Object Element creator .
• Внутри одиночного цикла проверка для позиции элемента .next() больше текущей.
  Если true, передайте функции $wrap() набор элементов вдиапазон от последний известный индекс до текущий индекс + 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;
}

<div id="gal">
  <img src="http://dummyimage.com/180x120/000/fff?text=FIRST">
  <img src="http://dummyimage.com/175x104/f0f/fff">
  <img src="http://dummyimage.com/150x100/a3d/fff">
  <img src="http://dummyimage.com/278x125/cf5/fff">
  <img src="http://dummyimage.com/199x120/e46/fff">
  <img src="http://dummyimage.com/207x480/361/fff">
  <img src="http://dummyimage.com/400x107/081/fff">
  <img src="http://dummyimage.com/50x40/cc3/fff">
  <img src="http://dummyimage.com/700x500/233/fff">
  <img src="http://dummyimage.com/300x120/a26/fff">
  <img src="http://dummyimage.com/301x177/f1d/fff">
  <img src="http://dummyimage.com/164x239/d34/fff">
  <img src="http://dummyimage.com/200x300/34e/fff">
  <img src="http://dummyimage.com/175x120/72a/fff">
  <img src="http://dummyimage.com/210x110/112/fff">
  <img src="http://dummyimage.com/278x225/644/fff">
  <img src="http://dummyimage.com/300x120/dc3/fff">
  <img src="http://dummyimage.com/90x104/b30/fff">
  <img src="http://dummyimage.com/120x60/bb3/fff">
  <img src="http://dummyimage.com/140x125/aa3/fff?text=LAST">
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

---

Таким образом, нет необходимости в нескольких циклах, клонировании или удалении элементов.