Randomize Ziegel im Mauerwerk

ist es möglich, mischen Sie die Steine in das JQuery-plugin Masonry, so dass jedes mal, wenn die Seite geladen wird, eine andere Regelung angezeigt wird? Es gibt keine option für random soweit ich das sagen kann.

Dank!

InformationsquelleAutor Dave | 2011-02-15
  1. 9

    Fand ich eine Antwort mehr auf die jQuery-Foren, und ich Zwickte es ein wenig für meine Bedürfnisse. Kurz gesagt - Sie ziehen den HTML-bits in Ihrem Mauerwerk () - Halter und Sie zufällig auf die Sammlung, dann setzen Sie es zurück:

      $(document).ready(function(){
    var ar = $('#masonry').children();
    ar.sort(function(a,b){
      //Get a random number between 0 and 10
      var temp = parseInt( Math.random()*10 );
      //Get 1 or 0, whether temp is odd or even
      var isOddOrEven = temp%2;
      //Get +1 or -1, whether temp greater or smaller than 5
      var isPosOrNeg = temp>5 ? 1 : -1;
      //Return -1, 0, or +1
      return( isOddOrEven*isPosOrNeg );
    });
    $('#masonry').html(ar);
    $('#masonry').masonry({ 
      columnWidth:220,
      animate: true
    });
  });
    • Ich kann nicht scheinen, um diese arbeiten - ersetzt das Mauerwerk Skript in die html - ist #Mauerwerk der container und .Kinder der Klasse auf dem div?
    • Ich glaube nicht, dass das funktionieren kann, weil der Natur von Mauerwerk.
    • Das snippet oben funktioniert Super. Sie müssen ändern Sie alle Instanzen von #Mauerwerk entsprechend Ihrem Mauerwerk container. Sie können auch verwenden Sie $('#Mauerwerk').Mauerwerk('reload'); nach dem mischen, wenn das grid ist bereits live.
    InformationsquelleAutor
  2. 2

    Ich denke, dass ein besser geeignetes plugin für Ihren wäre Isotop, es ist genau so aufgebaut wie Mauerwerk (und durch den gleichen Typ!) aber hat Sortier-und Filterfunktionen built-in

    • Yep, das hat ein einfaches $container.Isotop('shuffle'); option 🙂
    • Problem mit Isotop ist, kann es nicht verwendet werden in kommerziellen Produkten, ohne eine Lizenz.
    InformationsquelleAutor Charlotte Dann
  3. 1
    (function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);


$(window).load(function(){
  $(masonry-container).randomize(masonry-brick).masonry('reload');
});
    InformationsquelleAutor Justin
Schreibe einen Kommentar