Как мне перебирать изображения, реализованные в виде столбцов в div в JQuery?

У меня есть альбом с картинками.

HTML:

<div class = "gallery">
  <figure class = "figure">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
  </figure>
  ...
</div>

CSS:

.gallery {
  column-width: 300px;
  column-gap: 0;
}

.gallery-item {
  width: 350px;
  margin-bottom: 1rem;
  display: inline-block;
  padding: 0.3rem;
}

Количество картинок не фиксировано, а их высота может быть разной.

Я пытаюсь перебирать цифры в JQuery следующим образом:

var items = $('.gallery').children();

В этом случае порядок повторных изображений вертикальный. Я имею в виду, что сначала я получаю изображения из первого столбца сверху вниз, после этого полного второго столбца и т. д. Я понимаю, что это потому, что порядок цифр в моем HTML должен быть вертикальным. Но мне нужен способ перебора чисел таким образом:

Как мне перебирать изображения, реализованные в виде столбцов в div в JQuery?

Возможно, есть способ сделать это только с помощью JQuery. Или, может быть, мне следует внести некоторые изменения в свой HTML и CSS. Как лучше всего решить эту проблему?

Почему вам нужно повторять их именно в этом порядке?

— 21.07.2018 21:13

Я хочу сохранить интуитивно понятный порядок картинок во всплывающих окнах.

— 21.07.2018 21:19

Проверьте bootstrap, он поможет вам с разметкой столбцов

— 21.07.2018 21:25

jquery html css

21.07.2018 21:06

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 2

Вы должны отсортировать элементы перед итерацией (чистое решение js):

const items = [...document.querySelectorAll('.gallery figure')]

items.sort((a, b) => a.offsetTop/2 - b.offsetTop);

var output = ''

for ({textContent:t} of items) output += `${t} `

console.info(output)

.gallery {
  display: flex;
  flex-flow: column wrap;
  height: 400px; width:500px;
}

figure {
  width: 150px;
  margin: 0 1rem 1rem 0;
  background: #aaa;
  color: #fff;
  text-align: center;
  font-size: 40px;
  line-height: 2;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "gallery">
  <figure style = "height:100px">1</figure>
  <figure style = "height:80px">2</figure>
  <figure style = "height:120px">3</figure>
  <figure style = "height:70px">4</figure>
  <figure style = "height:100px">5</figure>
  <figure style = "height:100px">6</figure>
  <figure style = "height:80px">7</figure>
  <figure style = "height:120px">8</figure>
  <figure style = "height:70px">9</figure>
</div>

21.07.2018 22:18

Количество столбцов фиксировано? Если у вас всегда будет 3 столбца, вы можете пометить каждый столбец классом:

HTML:

<div class = "gallery">
<figure class = "figure col1">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
</figure>
<figure class = "figure col2">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
</figure>
<figure class = "figure col3">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
</figure>
<figure class = "figure col1">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
</figure>
<figure class = "figure col2">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
</figure>
<figure class = "figure col3">
    <img src = "..." class = "figure-img img-fluid gallery-item">
    <figcaption class = "figure-caption">...</figcaption>
</figure>
...

JQuery:

var items = [];

for (var i = 1; i < 4; i++) {
    $(".col"+i).each(function () {
        items.push($(this));
    });
}

21.07.2018 22:29

Другие вопросы по теме

Почему печать опубликованной переменной в html-коде может привести к XSS?

Как исправить сообщение об ошибке, отображаемое всегда на странице перенаправления

Получение динамического элемента с помощью селектора

Jquery улучшает анимацию .css () при нажатии

Ширина панели навигации увеличивается, когда она залипает. Почему?

Как добавить класс к родительской метке отмеченных переключателей на странице после обновления

Почему свойство CSS clear не очищает float?

Выравнивание по вертикали с помощью Bootstrap

Можно ли определить, какой модальный / компонент будет отображаться при нажатии на компонент?

Выберите один из трех элементов div с одинаковым именем класса

Как мне перебирать изображения, реализованные в виде столбцов в div в JQuery?

Ответы 2

Другие вопросы по теме

Похожие вопросы