Frage

Ich versuche, eine Miniaturbildgalerie mit Zeilen mit 3 Elementen zu erstellen, und ich kann die Breite (192 Pixel) oder die Rinnen (10 Pixel) der Elemente nicht steuern.Hier ist mein Code

    <script>
  $(function(){

    var $container = $('.isosort'),
        filters = {};

    $container.isotope({
      layoutMode : 'fitRows',
      animationEngine : 'best-available',
      masonry: {
        columnWidth: 192,
        gutterWidth: 10
      }
    });

    // filter buttons
    $('#options li ul li a').click(function(){
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });

  });
</script>
War es hilfreich?

Lösung

Mein Verständnis ist, dass Sie, um die Mauerwerksoptionen zu verwenden, wählen müssen "masonry" als Ihr layoutMode.

Andere Tipps

Ich habe gerade eine mögliche Lösung für dieses Problem hinzugefügt unter: https://stackoverflow.com/a/18199423/2676928

Es ist möglich, Teile von Isotope auszudehnen.Der Fitrows-Code ist vergleichsweise einfach und ich fügte ein paar Zeilen hinzu, die es dabei gemacht haben, Dachrinnen und Spaltenbreiteneinstellungen zu unterstützen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top