is it possible to randomize the bricks in the JQuery plugi开发者_运维知识库n Masonry so that every time the page loads a different arrangement is viewed? There is no option for random as far as I can tell.
Thanks!
I found an answer over on the jQuery forums and I tweaked it a bit for my needs. In short - you pull the HTML bits inside your masonry() holder and you randomize the collection, then you put it back:
$(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
});
});
I think a more appropriate plugin for your would be Isotope, it's built the same way as Masonry (and by the same guy!) but has sorting and filtering features built-in
(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');
});
精彩评论