Как мне разместить модули для отображения как Pinterest?

Я создаю плагин для доски объявлений Pinterest с помощью jQuery, где мне трудно понять, как они размещают свои модули.

Ниже приведен фрагмент того, как каждый элемент размещается в соответствии со своим n-ным значением в HTML. Но это неправильно, потому что Pinterest размещает элементы, которые идут в следующую строку под самым коротким столбцом. Совсем как эта ручка, http://codepen.io/nikhilkumar80/pen/oxpXVK, но мне было трудно это понять.

function modPosition() {
    $this.find(".pinterest-board__mod").each(function( modIndex ) {
        $(this).css({
            position: "absolute",
            left: columnWidth * (modIndex % settings.columns) + "%",
            width: columnWidth + "%"
        });
        // ..........
    });
}
modPosition();

Вот моя ссылка на CodePen, http://codepen.io/joshuawaheed/pen/beeJKq?editors=0010

У меня также возникают трудности с выяснением того, как установить верхнюю позицию элементов.

Что я могу сделать, чтобы сделать эту работу? Я поместил это в функцию, чтобы позиционирование могло запустить его снова при изменении размера документа и когда пользователь нажимает на опцию фильтра, чтобы удалить элементы и добавить соответствующие модули из соответствующего массива. Плагин также настроен для определения ширины модуля на основе значения столбцов опций.

Заранее спасибо.

Источник

2 ответа

Решение

У меня это работает. Я решил это путем:

  • Создание массива, его длина равна количеству столбцов.
  • Сохранение значения высоты модулей в первом ряду в массиве.
  • Цикл через каждый модуль.
    • Внедрение наименьшего значения массива в качестве позиции css top для текущего модуля.
    • Добавление высоты текущего модуля с элементом массива, содержащим наименьшее значение.
    • Установка позиции левого значения путем деления 100% на индекс наименьшего значения в массиве.

Вот код, который я написал, который вы можете просмотреть и просмотреть, перейдя по этой ссылке

function modPosition() {

    var columnsHeight = [/* Length equal to column count */], // This will be recreated on window resize.
        columnCount = /* Column count value */;


    /* Set CSS position top and left. */
    function modCssTopLeft() {

        var columnIndex = 0;

        $this.find(".pinterest-board__mod").each(function( modIndex ) {

            var topPos = 0,
                leftPos = 0;

            if ( modIndex >= columnCount) {
                topPos = Math.min.apply( Math, columnsHeight ); // Get smallest value in array.
                leftPos = 100 * columnsHeight.indexOf(topPos) / columnCount; // Set left position based on column count.
                columnsHeight[columnsHeight.indexOf(topPos)] += $(this).outerHeight(); // Change arrays smallest value by adding it with current modules height.
            }
            else {
                leftPos = 100 * (modIndex++) / columnCount; // Positioning for the modules in the first row.
            }

            $(this).css({
                position: "absolute",
                top: topPos + "px",
                left: leftPos + "%"
            });

            $(this).closest(".pinterest-board__content").css({
                height: Math.max.apply( Math, columnsHeight ) // Set height to the modules parent container.
            });

        });
    }
    modCssTopLeft();
}
modPosition();

$(window).resize(function() {
    modPosition();
});
Источник

Вы можете реализовать это несколькими способами

Я предлагаю вам два пути

1) вы можете использовать один из модулей js

Вы можете прочитать больше об этом там
https://designshack.net/articles/css/masonry/

http://www.wtfdiary.com/2012/08/6-amazing-jquery-plugins-to-design.html

2) Вы можете использовать правила CSS (flexbox)

Вы можете прочитать больше об этом там

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Оба эти метода имеют положительные и отрицательные черты

Например, флексбокс не поддерживается всеми версиями браузера

Но JS больше загружает процессор

Источник
Другие вопросы по тегам