3

Estamos aqui na empresa querendo criar uma vitrine com o efeito de reorganização estilo o que é usado pelo próprio stackexchange https://stackexchange.com/sites

Estive pensando em algoritmos de cálculo de posição, mas não estou chegando algo conclusivo de como reorganizar itens e calcular os espaços vazios.

Alguma lógica para este efeito em específico?

2 Respostas 2

4

Dê uma olhada nesse plugin http://isotope.metafizzy.co/, talvez resolva seu problema.

Ele tem diversas opções de layout, mas talvez a que voc6e tenha interesse seja a Masonry. Nela os blocos de tamanho diferente são encaixados, como se fosse um muro de tijolos (daí o nome). A documentação descreve assim:

Masonry é o layout padrão no Isotope. Os elementos são organizados de forma inteligente, dentro de um grid vertical. Para cada elemento, o script calcula a melhor posição dentro do grid.

O algoritmo que determina a posição dos elementos é esse aqui:

_masonryLayout : function( $elems ) {
    var instance = this,
        props = instance.masonry;

    $elems.each(function(){
        var $this  = $(this),
            //how many columns does this brick span
            colSpan = Math.ceil( $this.outerWidth(true) / props.columnWidth );
        colSpan = Math.min( colSpan, props.cols );

        if ( colSpan === 1 ) {
            // if brick spans only one column, just like singleMode
            instance._masonryPlaceBrick( $this, props.colYs );
        } else {
            // brick spans more than one column
            // how many different places could this brick fit horizontally
            var groupCount = props.cols + 1 - colSpan,
                groupY = [],
                groupColY,
                i;

            // for each group potential horizontal position
            for ( i=0; i < groupCount; i++ ) {
                // make an array of colY values for that one group
                groupColY = props.colYs.slice( i, i+colSpan );
                // and get the max value of the array
                groupY[i] = Math.max.apply( Math, groupColY );
            }
          instance._masonryPlaceBrick( $this, groupY );
        }
    });
}

Pelo que eu pude entender o que acontence é:

  1. O grid é iniciado com uma lista das posições iniciais de cada coluna. Ex: [0, 0, 0, 0]
  2. Pra cada elemento, o algoritmo determina em quais colunas ele caberia, baseado na largura. Então, se são 5 colunas, um elemento com a largura de 3 colunas, ele pode entrar nas colunas 1 ou 2.
  3. Em cada uma das colunas possíveis de encaixar o elemento, é verificado qual o lugar mais alto em que é possível inserí-lo.
  4. O elemento é inserido nos espaços mais altos possíveis, e a primeira posição disponível das colunas que ele ocupa é atualizada.

É um processo esquisito de se explicar, mas bem simples de visualizaar, se você ver os exemplos no site do Isotope. Ou, melhor ainda, se montar um pra você e futucar nele.

1
  • 1
    Olá Leandro, muito top este plugin. Vai servir de referência também para futuros trabalhos, mas gostei mais do masonry por ser gratuito e bem mais simples Commented 6/02/2014 às 17:36
2

Recomendo o uso do Masonry pra isso, é bem simples: http://masonry.desandro.com/

Ele não depende do jQuery, mas pode ser usado integrado com o mesmo.

Código fonte:

/*!
 * Masonry v3.1.4
 * Cascading grid layout library
 * http://masonry.desandro.com
 * MIT License
 * by David DeSandro
 */

( function( window ) {

'use strict';

// -------------------------- helpers -------------------------- //

var indexOf = Array.prototype.indexOf ?
  function( items, value ) {
    return items.indexOf( value );
  } :
  function ( items, value ) {
    for ( var i=0, len = items.length; i < len; i++ ) {
      var item = items[i];
      if ( item === value ) {
        return i;
      }
    }
    return -1;
  };

// -------------------------- masonryDefinition -------------------------- //

// used for AMD definition and requires
function masonryDefinition( Outlayer, getSize ) {
  // create an Outlayer layout class
  var Masonry = Outlayer.create('masonry');

  Masonry.prototype._resetLayout = function() {
    this.getSize();
    this._getMeasurement( 'columnWidth', 'outerWidth' );
    this._getMeasurement( 'gutter', 'outerWidth' );
    this.measureColumns();

    // reset column Y
    var i = this.cols;
    this.colYs = [];
    while (i--) {
      this.colYs.push( 0 );
    }

    this.maxY = 0;
  };

  Masonry.prototype.measureColumns = function() {
    this.getContainerWidth();
    // if columnWidth is 0, default to outerWidth of first item
    if ( !this.columnWidth ) {
      var firstItem = this.items[0];
      var firstItemElem = firstItem && firstItem.element;
      // columnWidth fall back to item of first element
      this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
        // if first elem has no width, default to size of container
        this.containerWidth;
    }

    this.columnWidth += this.gutter;

    this.cols = Math.floor( ( this.containerWidth + this.gutter ) / this.columnWidth );
    this.cols = Math.max( this.cols, 1 );
  };

  Masonry.prototype.getContainerWidth = function() {
    // container is parent if fit width
    var container = this.options.isFitWidth ? this.element.parentNode : this.element;
    // check that this.size and size are there
    // IE8 triggers resize on body size change, so they might not be
    var size = getSize( container );
    this.containerWidth = size && size.innerWidth;
  };

  Masonry.prototype._getItemLayoutPosition = function( item ) {
    item.getSize();
    // how many columns does this brick span
    var remainder = item.size.outerWidth % this.columnWidth;
    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
    // round if off by 1 pixel, otherwise use ceil
    var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
    colSpan = Math.min( colSpan, this.cols );

    var colGroup = this._getColGroup( colSpan );
    // get the minimum Y value from the columns
    var minimumY = Math.min.apply( Math, colGroup );
    var shortColIndex = indexOf( colGroup, minimumY );

    // position the brick
    var position = {
      x: this.columnWidth * shortColIndex,
      y: minimumY
    };

    // apply setHeight to necessary columns
    var setHeight = minimumY + item.size.outerHeight;
    var setSpan = this.cols + 1 - colGroup.length;
    for ( var i = 0; i < setSpan; i++ ) {
      this.colYs[ shortColIndex + i ] = setHeight;
    }

    return position;
  };

  /**
   * @param {Number} colSpan - number of columns the element spans
   * @returns {Array} colGroup
   */
  Masonry.prototype._getColGroup = function( colSpan ) {
    if ( colSpan < 2 ) {
      // if brick spans only one column, use all the column Ys
      return this.colYs;
    }

    var colGroup = [];
    // how many different places could this brick fit horizontally
    var groupCount = this.cols + 1 - colSpan;
    // for each group potential horizontal position
    for ( var i = 0; i < groupCount; i++ ) {
      // make an array of colY values for that one group
      var groupColYs = this.colYs.slice( i, i + colSpan );
      // and get the max value of the array
      colGroup[i] = Math.max.apply( Math, groupColYs );
    }
    return colGroup;
  };

  Masonry.prototype._manageStamp = function( stamp ) {
    var stampSize = getSize( stamp );
    var offset = this._getElementOffset( stamp );
    // get the columns that this stamp affects
    var firstX = this.options.isOriginLeft ? offset.left : offset.right;
    var lastX = firstX + stampSize.outerWidth;
    var firstCol = Math.floor( firstX / this.columnWidth );
    firstCol = Math.max( 0, firstCol );
    var lastCol = Math.floor( lastX / this.columnWidth );
    // lastCol should not go over if multiple of columnWidth #425
    lastCol -= lastX % this.columnWidth ? 0 : 1;
    lastCol = Math.min( this.cols - 1, lastCol );
    // set colYs to bottom of the stamp
    var stampMaxY = ( this.options.isOriginTop ? offset.top : offset.bottom ) +
      stampSize.outerHeight;
    for ( var i = firstCol; i <= lastCol; i++ ) {
      this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
    }
  };

  Masonry.prototype._getContainerSize = function() {
    this.maxY = Math.max.apply( Math, this.colYs );
    var size = {
      height: this.maxY
    };

    if ( this.options.isFitWidth ) {
      size.width = this._getContainerFitWidth();
    }

    return size;
  };

  Masonry.prototype._getContainerFitWidth = function() {
    var unusedCols = 0;
    // count unused columns
    var i = this.cols;
    while ( --i ) {
      if ( this.colYs[i] !== 0 ) {
        break;
      }
      unusedCols++;
    }
    // fit container to columns that have been used
    return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
  };

  // debounced, layout on resize
  // HEADS UP this overwrites Outlayer.resize
  // Any changes in Outlayer.resize need to be manually added here
  Masonry.prototype.resize = function() {
    // don't trigger if size did not change
    var previousWidth = this.containerWidth;
    this.getContainerWidth();
    if ( previousWidth === this.containerWidth ) {
      return;
    }

    this.layout();
  };

  return Masonry;
}

// -------------------------- transport -------------------------- //

if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( [
      'outlayer/outlayer',
      'get-size/get-size'
    ],
    masonryDefinition );
} else {
  // browser global
  window.Masonry = masonryDefinition(
    window.Outlayer,
    window.getSize
  );
}

})( window );
7
  • O código do Masonry é consideravelmente mais simples do que o do Isotope: github.com/desandro/masonry/blob/master/masonry.js
    – J. Bruni
    Commented 6/02/2014 às 17:07
  • 1
    no caso, ser mais simples é uma tremenda vantagem, já que ele está interessado no algoritmo (apenas se ele quiser + recursos, aí sim, que estude o código do Isotope... mas com certeza será melhor dominar o algoritmo simples antes de partir pro complexo...)
    – J. Bruni
    Commented 6/02/2014 às 17:12
  • 1
    Mesmo que este link seja uma boa sugestão, esta resposta não terá validade se um dia o link deixar de funcionar. Por isso, e porque é importante para a comunidade ter conteúdo aqui mesmo, seria melhor você responder com respostas mais completas. Você pode elaborar mais sua resposta? Um resumo do conteúdo do link já ajudaria bastante! Saiba mais sobre o assunto neste item do nosso FAQ da Comunidade: Respostas que apenas contêm links são boas?
    – bfavaretto
    Commented 6/02/2014 às 17:29
  • 1
    Aproveitando: acho o masonry melhor para se estudar que o isotope (que é baseado no masonry e veio depois).
    – bfavaretto
    Commented 6/02/2014 às 17:30
  • 1
    Olá Gabriel, muito obrigado pela sugestão \0/ Salvou meu trampo aqui e meu tempo também. Um ótimo plugin =) Commented 6/02/2014 às 17:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .