(function(exports){ function minigrid(containerselector, itemselector, gutter, animate, done) { var foreach = array.prototype.foreach; var containerele = document.queryselector(containerselector); var itemsnodelist = document.queryselectorall(itemselector); gutter = gutter || 0; containerele.style.width = ''; var containerwidth = containerele.getboundingclientrect().width; var firstchildwidth = itemsnodelist[0].getboundingclientrect().width + gutter; var cols = math.max(math.floor((containerwidth - gutter) / firstchildwidth), 1); var count = 0; containerwidth = (firstchildwidth * cols + gutter) + 'px'; containerele.style.width = containerwidth; for (var itemsgutter = [], itemsposx = [], g = 0; g < cols; g++) { itemsposx.push(g * firstchildwidth + gutter); itemsgutter.push(gutter); } foreach.call(itemsnodelist, function(item){ var itemindex = itemsgutter.slice(0).sort(function (a, b) { return a - b; }).shift(); itemindex = itemsgutter.indexof(itemindex); var posx = itemsposx[itemindex]; var posy = itemsgutter[itemindex]; var transformprops = [ 'webkittransform', 'moztransform', 'mstransform', 'otransform', 'transform' ]; if (!animate) { foreach.call(transformprops, function(transform){ item.style[transform] = 'translate(' + posx + 'px,' + posy + 'px)'; }); } itemsgutter[itemindex] += item.getboundingclientrect().height + gutter; count = count + 1; if (animate) { return animate(item, posx, posy, count); } }); var containerheight = itemsgutter.slice(0).sort(function (a, b) { return a - b; }).pop(); containerele.style.height = containerheight + 'px'; if (typeof done === 'function'){ done(); } } if (typeof define === 'function' && define.amd) { define(function() { return minigrid; }); } else if (typeof module !== 'undefined' && module.exports) { module.exports = minigrid; } else { exports.minigrid = minigrid; } })(this);