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

Question

Я строю плагин типа 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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Я предлагаю вам два способа

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/

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

Например fleksboks не поддерживается всеми версиями браузера

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