(function(exports) {
'use strict';
function PinterestGrid(options) {
this.settings = options;
this.loaded = false;
this.transform = _getTransformProperty();
// Parent element
this.$container = options.container instanceof Node
? options.container
: document.querySelector(options.container);
if (!this.$container) {
return false;
}
// Items
this.$itemCollection = options.item instanceof NodeList
? options.item
: this.$container.querySelectorAll(options.item);
if (!this.$itemCollection || this.$itemCollection.length === 0) {
return false;
}
if (!this.settings.containerLoaded || typeof this.settings.containerLoaded !== 'string') {
this.settings.containerLoaded = false;
}
if (!this.settings.itemLoaded || typeof this.settings.itemLoaded !== 'string') {
this.settings.itemLoaded = false;
}
if (!this.loaded || this.settings.skipWindowOnLoad) {
this.init();
return;
}
}
PinterestGrid.prototype.init = function() {
console.log('init');
if (this.settings.containerLoaded) {
this.$container.classList.add(this.settings.containerLoaded);
} else if (!/loaded/.test(this.$container.className)) {
this.$container.classList.add(this.$container.className.split(' ')[0] + '--loaded');
}
this.loaded = true;
var gutter = (undefined !== this.settings.gutter) ? parseInt(this.settings.gutter) : 0;
var callback = this.settings.callback;
this.$container.style.width = '';
var containerWidth = this.$container.getBoundingClientRect().width;
var firstChildWidth = this.$itemCollection[0].getBoundingClientRect().width + gutter;
var cols = Math.max(Math.floor((containerWidth - gutter) / firstChildWidth), 1);
var count = 0;
containerWidth = (firstChildWidth * cols + gutter) + 'px';
this.$container.style.width = containerWidth;
this.$container.style.position = 'relative';
var itemsGutter = [];
var itemsPosX = [];
for (var g = 0; g < cols; g++) {
itemsPosX.push(g * firstChildWidth + gutter);
itemsGutter.push(gutter);
}
Array.prototype.forEach.call(this.$itemCollection, 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];
item.style.position = 'absolute';
item.style.webkitBackfaceVisibility = item.style.backfaceVisibility = 'hidden';
if (this.settings.itemLoaded) {
item.classList.add(this.settings.itemLoaded);
} else if (!/loaded/.test(item.className)) {
item.classList.add(item.className.split(' ')[0] + '--loaded');
}
if (!this.settings.animate && this.transform) {
item.style[this.transform] = 'translate3D(' + posX + 'px,' + posY + 'px, 0)';
}
itemsGutter[itemIndex] += item.getBoundingClientRect().height + gutter;
count = count + 1;
if (this.settings.animate) {
return this.settings.animate(item, posX, posY, count);
}
}.bind(this));
var containerHeight = itemsGutter.slice(0).sort(function(a, b) { return a - b }).pop();
this.$container.style.height = containerHeight + 'px';
if (typeof callback === 'function') {
callback(this.$itemCollection);
}
}
// Get transform property
function _getTransformProperty() {
var style = document.createElement('div').style;
var transform;
var vendorProp;
if (undefined !== style[vendorProp = 'webkitTransform']) {
transform = vendorProp;
}
if (undefined !== style[vendorProp = 'msTransform']) {
transform = vendorProp;
}
if (undefined !== style[vendorProp = 'transform']) {
transform = vendorProp;
}
return transform;
}
// AMD
if (typeof define === 'function' && define.amd) {
define(function() { return PinterestGrid });
}
// CommonJS
else if ( typeof module !== 'undefined' && module.exports ) {
module.exports = PinterestGrid;
}
// Global
else {
exports.PinterestGrid = PinterestGrid;
}
} (this));
Plugin to create a Pinterest style layout.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.