Вывод блоков разной высоты друг под другом в n колонок

7 Мар
2012

Задача: вывести новости в (n) колонок.
Условия: сервер выдает плоский список. Таблицы не использовать.
Решение: для блоков используется абсолютное позиционирование. Для рассчета координад используется javascript.

Может изобрел велосипед, но решение под катом.


Javascript алгоритм:
  • Вычисляем количество колонок, которое уместится на страницу
  • Рассчитываем отсутпы от левого края для каждой колонки
  • Создаем массив pinArray, в котором при переборе новостей будем записывать отступ от верха для каждой колонки


Код:
var pinBoard=function(){ 

  return {   
    pinsContainer:"#pinContainer",
    pinArray:[],    
    columnCount:3,
    columns:0,
    columnWidthInner:180,
    columnMargin:15,  
    columnPadding:30,  
    columnContainerWidth:0,  
  
    setup:function() {   
      $(document).ready(function() {      
        pinBoard.allPins()   
      });   
      $(window).resize(function() {
        pinBoard.allPins();
      });  
    },    

    allPins:function() {
      var a = document.documentElement.clientWidth;  
      
      this.columnWidthOuter = this.columnWidthInner + this.columnMargin + this.columnPadding;      
      this.columns = Math.max(this.columnCount,parseInt(a/this.columnWidthOuter));      
      a = this.columnWidthOuter * this.columns - this.columnMargin;      
      jQuery(this.pinsContainer).width(a);
      for( a = 0; a < this.columns; a++) this.pinArray[a]=0;
      a = $(this.pinsContainer+" .pin");
      this.buildPins(a);
    },
    
    buildPins:function(a) {    
      this.pinArray = this.pinArray.slice(0,this.columns);        
      
      for (var i = 0; i<a.length; i++) {
        var c = a[i];
        var g = jQuery.inArray(Math.min.apply(Math,this.pinArray),this.pinArray),
          f = this.pinArray[g];
        c.style.top= f + "px";
        c.style.left= g*this.columnWidthOuter + "px";
        this.pinArray[g]= f + c.offsetHeight+this.columnMargin;
      }         
      jQuery(this.pinsContainer).height(Math.max.apply(Math,this.pinArray));
  }
}}();




Пример
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх