release candidate
This commit is contained in:
Bachir Soussi Chiadmi
+16
-20
@@ -1,30 +1,26 @@
|
||||
{
|
||||
"name": "masonry",
|
||||
"version": "3.3.2",
|
||||
"description": "Cascading grid layout library",
|
||||
"main": "masonry.js",
|
||||
"dependencies": {
|
||||
"get-size": "~1.2.2",
|
||||
"outlayer": "~1.4.0",
|
||||
"fizzy-ui-utils": "~1.0.1"
|
||||
"get-size": "^2.0.2",
|
||||
"outlayer": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jquery-bridget": "1.1.x",
|
||||
"doc-ready": "1.x",
|
||||
"jquery-bridget": "~2.0.0",
|
||||
"qunit": "^1.12",
|
||||
"jquery": ">=1.4.3 <2"
|
||||
"jquery": ">=1.4.3 <4"
|
||||
},
|
||||
"ignore": [
|
||||
"examples/",
|
||||
"test/",
|
||||
"CONTRIBUTING.mdown",
|
||||
"Gruntfile.js",
|
||||
"package.json",
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
"tests",
|
||||
"sandbox/",
|
||||
"gulpfile.js",
|
||||
"package.json",
|
||||
"composer.json"
|
||||
],
|
||||
"homepage": "http://masonry.desandro.com",
|
||||
"authors": [
|
||||
@@ -41,14 +37,14 @@
|
||||
"globals",
|
||||
"node"
|
||||
],
|
||||
"_release": "3.3.2",
|
||||
"version": "4.2.0",
|
||||
"_release": "4.2.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v3.3.2",
|
||||
"commit": "48ed97fd2ebf0c126833bef6b29aff51781701e2"
|
||||
"tag": "v4.2.0",
|
||||
"commit": "55f57c9534cf553da9c9a43427a1b046388dd75d"
|
||||
},
|
||||
"_source": "git://github.com/desandro/masonry.git",
|
||||
"_target": "~3.3.2",
|
||||
"_originalSource": "masonry",
|
||||
"_direct": true
|
||||
"_source": "https://github.com/desandro/masonry.git",
|
||||
"_target": "^4.1.0",
|
||||
"_originalSource": "masonry"
|
||||
}
|
||||
+12
-8
@@ -15,12 +15,12 @@ See [masonry.desandro.com](http://masonry.desandro.com) for complete docs and de
|
||||
|
||||
### CDN
|
||||
|
||||
Link directly to [Masonry files on cdnjs](https://cdnjs.com/libraries/masonry).
|
||||
Link directly to Masonry files on [unpkg](https://unpkg.com/).
|
||||
|
||||
``` html
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script>
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
|
||||
<!-- or -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||
```
|
||||
|
||||
### Package managers
|
||||
@@ -29,7 +29,6 @@ Bower: `bower install masonry --save`
|
||||
|
||||
[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save`
|
||||
|
||||
|
||||
## Initialize
|
||||
|
||||
With jQuery
|
||||
@@ -46,21 +45,26 @@ With vanilla JavaScript
|
||||
|
||||
``` js
|
||||
// vanilla JS
|
||||
// init with element
|
||||
var grid = document.querySelector('.grid');
|
||||
var msnry = new Masonry( grid, {
|
||||
// options...
|
||||
itemSelector: '.grid-item',
|
||||
columnWidth: 200
|
||||
});
|
||||
|
||||
// init with selector
|
||||
var msnry = new Masonry( '.grid', {
|
||||
// options...
|
||||
});
|
||||
```
|
||||
|
||||
With HTML
|
||||
|
||||
Add a class of `js-masonry` to your element. Options can be set in JSON in `data-masonry-options`.
|
||||
Add a `data-masonry` attribute to your element. Options can be set in JSON in the value.
|
||||
|
||||
``` html
|
||||
<div class="grid js-masonry"
|
||||
data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
|
||||
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
...
|
||||
@@ -73,4 +77,4 @@ Masonry is released under the [MIT license](http://desandro.mit-license.org). Ha
|
||||
|
||||
* * *
|
||||
|
||||
Copyright 2015 David DeSandro
|
||||
Made by David DeSandro
|
||||
+9
-13
@@ -1,30 +1,26 @@
|
||||
{
|
||||
"name": "masonry",
|
||||
"version": "3.3.2",
|
||||
"description": "Cascading grid layout library",
|
||||
"main": "masonry.js",
|
||||
"dependencies": {
|
||||
"get-size": "~1.2.2",
|
||||
"outlayer": "~1.4.0",
|
||||
"fizzy-ui-utils": "~1.0.1"
|
||||
"get-size": "^2.0.2",
|
||||
"outlayer": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jquery-bridget": "1.1.x",
|
||||
"doc-ready": "1.x",
|
||||
"jquery-bridget": "~2.0.0",
|
||||
"qunit": "^1.12",
|
||||
"jquery": ">=1.4.3 <2"
|
||||
"jquery": ">=1.4.3 <4"
|
||||
},
|
||||
"ignore": [
|
||||
"examples/",
|
||||
"test/",
|
||||
"CONTRIBUTING.mdown",
|
||||
"Gruntfile.js",
|
||||
"package.json",
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
"tests",
|
||||
"sandbox/",
|
||||
"gulpfile.js",
|
||||
"package.json",
|
||||
"composer.json"
|
||||
],
|
||||
"homepage": "http://masonry.desandro.com",
|
||||
"authors": [
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
### v3.3.1
|
||||
|
||||
+ Updated Outlayer v1.4.1
|
||||
+ Added jQuery events
|
||||
+ Fixed Safari layout and transition bugs. Fixed [#698](https://github.com/desandro/masonry/issues/698)
|
||||
|
||||
## v3.3.0
|
||||
|
||||
+ Added `percentPosition` option. Fixed [#574](https://github.com/desandro/masonry/issues/574)
|
||||
+ Removed first `instance` argument from `layoutComplete` and `removeComplete` events
|
||||
+ Added use of [fizzy-ui-utils](https://github.com/metafizzy/fizzy-ui-utils)
|
||||
|
||||
### v3.2.3
|
||||
|
||||
+ Fixed pixel rounding errors related to Firefox, gutters. Fixed [#580](https://github.com/desandro/masonry/pull/580)
|
||||
+ Moved poorly named `examples/` to better named `sandbox/`. Fixed [#539](https://github.com/desandro/masonry/issues/539)
|
||||
+ Moved [`masonry-v2-shim.js` shim to its own repo](https://github.com/desandro/masonry-v2-3-shim)
|
||||
|
||||
### v3.2.2
|
||||
|
||||
+ Update [getSize](https://github.com/desandro/get-size) to v1.2.1 to fix IE8 bug
|
||||
|
||||
### v3.2.1
|
||||
|
||||
+ Fix missing dependencies in `package.json`
|
||||
|
||||
## v3.2.0
|
||||
|
||||
+ Add CommonJS support [#480](https://github.com/desandro/masonry/issues/480)
|
||||
+ jQuery Bridget no longer in explicit dependency tree
|
||||
|
||||
### v3.1.5
|
||||
|
||||
+ Add dist/pkgd files
|
||||
+ Upgrade to Outlayer v1.2
|
||||
|
||||
### v3.1.4
|
||||
|
||||
Fix stamp bug if multiple of columnWidth
|
||||
|
||||
### v3.1.3
|
||||
|
||||
Round if off by 1px
|
||||
|
||||
### v3.1.2
|
||||
|
||||
Fix IE8 bugs w/ hidden items
|
||||
|
||||
### v3.1.1
|
||||
|
||||
update Outlayer v1.1.2
|
||||
|
||||
## v3.1.0
|
||||
|
||||
Add better RequireJS support
|
||||
|
||||
### v3.0.3
|
||||
|
||||
Fix bug with `isFitWidth` and resizing
|
||||
|
||||
### v3.0.2
|
||||
|
||||
Add back `isFitWidth`
|
||||
|
||||
### v3.0.1
|
||||
|
||||
fixed empty container
|
||||
|
||||
## v3.0.0
|
||||
|
||||
+ Complete rewrite
|
||||
+ Componentize with Bower
|
||||
+ Remove jQuery as strict dependency
|
||||
+ Remove smartresize jQuery plugin
|
||||
+ imagesLoaded no longer included
|
||||
+ jQuery animation has been removed. animationOptions has been removed. This means no animation for in IE8 and IE9.
|
||||
+ Corner stamp is now integrated as `stamp` option and `stamp` method
|
||||
+ `isRTL` option removed, use `isOriginLeft: false` instead
|
||||
+ `isResizable` option renamed to `isResizeBound`
|
||||
+ `layout` method renamed to `layoutItems`
|
||||
+ `gutterWidth` option renamed to `gutter`
|
||||
+747
-1435
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+80
-44
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Masonry v3.3.2
|
||||
* Masonry v4.2.0
|
||||
* Cascading grid layout library
|
||||
* http://masonry.desandro.com
|
||||
* MIT License
|
||||
@@ -7,33 +7,30 @@
|
||||
*/
|
||||
|
||||
( function( window, factory ) {
|
||||
'use strict';
|
||||
// universal module definition
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
/* jshint strict: false */ /*globals define, module, require */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( [
|
||||
'outlayer/outlayer',
|
||||
'get-size/get-size',
|
||||
'fizzy-ui-utils/utils'
|
||||
'get-size/get-size'
|
||||
],
|
||||
factory );
|
||||
} else if ( typeof exports === 'object' ) {
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory(
|
||||
require('outlayer'),
|
||||
require('get-size'),
|
||||
require('fizzy-ui-utils')
|
||||
require('get-size')
|
||||
);
|
||||
} else {
|
||||
// browser global
|
||||
window.Masonry = factory(
|
||||
window.Outlayer,
|
||||
window.getSize,
|
||||
window.fizzyUIUtils
|
||||
window.getSize
|
||||
);
|
||||
}
|
||||
|
||||
}( window, function factory( Outlayer, getSize, utils ) {
|
||||
}( window, function factory( Outlayer, getSize ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
@@ -41,24 +38,28 @@
|
||||
|
||||
// create an Outlayer layout class
|
||||
var Masonry = Outlayer.create('masonry');
|
||||
// isFitWidth -> fitWidth
|
||||
Masonry.compatOptions.fitWidth = 'isFitWidth';
|
||||
|
||||
Masonry.prototype._resetLayout = function() {
|
||||
var proto = Masonry.prototype;
|
||||
|
||||
proto._resetLayout = function() {
|
||||
this.getSize();
|
||||
this._getMeasurement( 'columnWidth', 'outerWidth' );
|
||||
this._getMeasurement( 'gutter', 'outerWidth' );
|
||||
this.measureColumns();
|
||||
|
||||
// reset column Y
|
||||
var i = this.cols;
|
||||
this.colYs = [];
|
||||
while (i--) {
|
||||
for ( var i=0; i < this.cols; i++ ) {
|
||||
this.colYs.push( 0 );
|
||||
}
|
||||
|
||||
this.maxY = 0;
|
||||
this.horizontalColIndex = 0;
|
||||
};
|
||||
|
||||
Masonry.prototype.measureColumns = function() {
|
||||
proto.measureColumns = function() {
|
||||
this.getContainerWidth();
|
||||
// if columnWidth is 0, default to outerWidth of first item
|
||||
if ( !this.columnWidth ) {
|
||||
@@ -83,16 +84,17 @@
|
||||
this.cols = Math.max( cols, 1 );
|
||||
};
|
||||
|
||||
Masonry.prototype.getContainerWidth = function() {
|
||||
proto.getContainerWidth = function() {
|
||||
// container is parent if fit width
|
||||
var container = this.options.isFitWidth ? this.element.parentNode : this.element;
|
||||
var isFitWidth = this._getOption('fitWidth');
|
||||
var container = isFitWidth ? this.element.parentNode : this.element;
|
||||
// check that this.size and size are there
|
||||
// IE8 triggers resize on body size change, so they might not be
|
||||
var size = getSize( container );
|
||||
this.containerWidth = size && size.innerWidth;
|
||||
};
|
||||
|
||||
Masonry.prototype._getItemLayoutPosition = function( item ) {
|
||||
proto._getItemLayoutPosition = function( item ) {
|
||||
item.getSize();
|
||||
// how many columns does this brick span
|
||||
var remainder = item.size.outerWidth % this.columnWidth;
|
||||
@@ -100,33 +102,41 @@
|
||||
// round if off by 1 pixel, otherwise use ceil
|
||||
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
|
||||
colSpan = Math.min( colSpan, this.cols );
|
||||
|
||||
var colGroup = this._getColGroup( colSpan );
|
||||
// get the minimum Y value from the columns
|
||||
var minimumY = Math.min.apply( Math, colGroup );
|
||||
var shortColIndex = utils.indexOf( colGroup, minimumY );
|
||||
|
||||
// use horizontal or top column position
|
||||
var colPosMethod = this.options.horizontalOrder ?
|
||||
'_getHorizontalColPosition' : '_getTopColPosition';
|
||||
var colPosition = this[ colPosMethod ]( colSpan, item );
|
||||
// position the brick
|
||||
var position = {
|
||||
x: this.columnWidth * shortColIndex,
|
||||
y: minimumY
|
||||
x: this.columnWidth * colPosition.col,
|
||||
y: colPosition.y
|
||||
};
|
||||
|
||||
// apply setHeight to necessary columns
|
||||
var setHeight = minimumY + item.size.outerHeight;
|
||||
var setSpan = this.cols + 1 - colGroup.length;
|
||||
for ( var i = 0; i < setSpan; i++ ) {
|
||||
this.colYs[ shortColIndex + i ] = setHeight;
|
||||
var setHeight = colPosition.y + item.size.outerHeight;
|
||||
var setMax = colSpan + colPosition.col;
|
||||
for ( var i = colPosition.col; i < setMax; i++ ) {
|
||||
this.colYs[i] = setHeight;
|
||||
}
|
||||
|
||||
return position;
|
||||
};
|
||||
|
||||
proto._getTopColPosition = function( colSpan ) {
|
||||
var colGroup = this._getTopColGroup( colSpan );
|
||||
// get the minimum Y value from the columns
|
||||
var minimumY = Math.min.apply( Math, colGroup );
|
||||
|
||||
return {
|
||||
col: colGroup.indexOf( minimumY ),
|
||||
y: minimumY,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Number} colSpan - number of columns the element spans
|
||||
* @returns {Array} colGroup
|
||||
*/
|
||||
Masonry.prototype._getColGroup = function( colSpan ) {
|
||||
proto._getTopColGroup = function( colSpan ) {
|
||||
if ( colSpan < 2 ) {
|
||||
// if brick spans only one column, use all the column Ys
|
||||
return this.colYs;
|
||||
@@ -137,19 +147,43 @@
|
||||
var groupCount = this.cols + 1 - colSpan;
|
||||
// for each group potential horizontal position
|
||||
for ( var i = 0; i < groupCount; i++ ) {
|
||||
// make an array of colY values for that one group
|
||||
var groupColYs = this.colYs.slice( i, i + colSpan );
|
||||
// and get the max value of the array
|
||||
colGroup[i] = Math.max.apply( Math, groupColYs );
|
||||
colGroup[i] = this._getColGroupY( i, colSpan );
|
||||
}
|
||||
return colGroup;
|
||||
};
|
||||
|
||||
Masonry.prototype._manageStamp = function( stamp ) {
|
||||
proto._getColGroupY = function( col, colSpan ) {
|
||||
if ( colSpan < 2 ) {
|
||||
return this.colYs[ col ];
|
||||
}
|
||||
// make an array of colY values for that one group
|
||||
var groupColYs = this.colYs.slice( col, col + colSpan );
|
||||
// and get the max value of the array
|
||||
return Math.max.apply( Math, groupColYs );
|
||||
};
|
||||
|
||||
// get column position based on horizontal index. #873
|
||||
proto._getHorizontalColPosition = function( colSpan, item ) {
|
||||
var col = this.horizontalColIndex % this.cols;
|
||||
var isOver = colSpan > 1 && col + colSpan > this.cols;
|
||||
// shift to next row if item can't fit on current row
|
||||
col = isOver ? 0 : col;
|
||||
// don't let zero-size items take up space
|
||||
var hasSize = item.size.outerWidth && item.size.outerHeight;
|
||||
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
|
||||
|
||||
return {
|
||||
col: col,
|
||||
y: this._getColGroupY( col, colSpan ),
|
||||
};
|
||||
};
|
||||
|
||||
proto._manageStamp = function( stamp ) {
|
||||
var stampSize = getSize( stamp );
|
||||
var offset = this._getElementOffset( stamp );
|
||||
// get the columns that this stamp affects
|
||||
var firstX = this.options.isOriginLeft ? offset.left : offset.right;
|
||||
var isOriginLeft = this._getOption('originLeft');
|
||||
var firstX = isOriginLeft ? offset.left : offset.right;
|
||||
var lastX = firstX + stampSize.outerWidth;
|
||||
var firstCol = Math.floor( firstX / this.columnWidth );
|
||||
firstCol = Math.max( 0, firstCol );
|
||||
@@ -158,27 +192,29 @@
|
||||
lastCol -= lastX % this.columnWidth ? 0 : 1;
|
||||
lastCol = Math.min( this.cols - 1, lastCol );
|
||||
// set colYs to bottom of the stamp
|
||||
var stampMaxY = ( this.options.isOriginTop ? offset.top : offset.bottom ) +
|
||||
|
||||
var isOriginTop = this._getOption('originTop');
|
||||
var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
|
||||
stampSize.outerHeight;
|
||||
for ( var i = firstCol; i <= lastCol; i++ ) {
|
||||
this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
|
||||
}
|
||||
};
|
||||
|
||||
Masonry.prototype._getContainerSize = function() {
|
||||
proto._getContainerSize = function() {
|
||||
this.maxY = Math.max.apply( Math, this.colYs );
|
||||
var size = {
|
||||
height: this.maxY
|
||||
};
|
||||
|
||||
if ( this.options.isFitWidth ) {
|
||||
if ( this._getOption('fitWidth') ) {
|
||||
size.width = this._getContainerFitWidth();
|
||||
}
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
Masonry.prototype._getContainerFitWidth = function() {
|
||||
proto._getContainerFitWidth = function() {
|
||||
var unusedCols = 0;
|
||||
// count unused columns
|
||||
var i = this.cols;
|
||||
@@ -192,10 +228,10 @@
|
||||
return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
|
||||
};
|
||||
|
||||
Masonry.prototype.needsResizeLayout = function() {
|
||||
proto.needsResizeLayout = function() {
|
||||
var previousWidth = this.containerWidth;
|
||||
this.getContainerWidth();
|
||||
return previousWidth !== this.containerWidth;
|
||||
return previousWidth != this.containerWidth;
|
||||
};
|
||||
|
||||
return Masonry;
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>add items</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
.grid:after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.grid-sizer,
|
||||
.grid-item {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
border: 1px solid;
|
||||
background: #09F;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid-item--width2 { width: 50%; }
|
||||
|
||||
.grid-item--height2 { height: 160px; }
|
||||
|
||||
.grid-item--height3 { height: 220px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>add items</h1>
|
||||
|
||||
<p>
|
||||
<button class="prepend-button">Prepend button</button>
|
||||
<button class="append-button">Append button</button>
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="grid-item grid-item--width2"></div>
|
||||
<div class="grid-item grid-item--height2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
function getItemElement() {
|
||||
var elem = document.createElement('div');
|
||||
var wRand = Math.random();
|
||||
var hRand = Math.random();
|
||||
var widthClass = wRand > 0.8 ? 'grid-item--width3' :
|
||||
wRand > 0.6 ? 'grid-item--width2' : '';
|
||||
var heightClass = hRand > 0.8 ? 'grid-item--height3' :
|
||||
hRand > 0.5 ? 'grid-item--height2' : '';
|
||||
elem.className = 'grid-item ' + widthClass + ' ' + heightClass;
|
||||
return elem;
|
||||
};
|
||||
|
||||
docReady( function() {
|
||||
var msnry = window.msnry = new Masonry( '.grid', {
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true
|
||||
});
|
||||
|
||||
document.querySelector('.prepend-button').addEventListener( 'click', function() {
|
||||
var itemElem = getItemElement();
|
||||
msnry.element.insertBefore( itemElem, msnry.element.firstChild );
|
||||
msnry.prepended( itemElem );
|
||||
});
|
||||
|
||||
document.querySelector('.append-button').addEventListener( 'click', function() {
|
||||
var itemElem = getItemElement();
|
||||
msnry.element.appendChild( itemElem );
|
||||
msnry.appended( itemElem );
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>basic</title>
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>basic</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
var container = document.querySelector('#basic');
|
||||
var msnry = new Masonry( container, {
|
||||
columnWidth: 60
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,119 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>bottom up</title>
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
#stamped .stamp1 {
|
||||
width: 30%;
|
||||
height: 100px;
|
||||
left: 30%;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
#stamped .stamp2 {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
left: 20px;
|
||||
bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>bottom up</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<div id="stamped" class="container">
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
( function() {
|
||||
var container = document.querySelector('#basic');
|
||||
var msnry = new Masonry( container, {
|
||||
isOriginTop: false,
|
||||
columnWidth: 60
|
||||
});
|
||||
})();
|
||||
|
||||
( function() {
|
||||
var container = document.querySelector('#stamped');
|
||||
var msnry = new Masonry( container, {
|
||||
itemSelector: '.item',
|
||||
isOriginTop: false,
|
||||
columnWidth: 60,
|
||||
gutter: 10,
|
||||
stamp: '.stamp'
|
||||
});
|
||||
})();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>browserify</title>
|
||||
|
||||
<link rel="stylesheet" href="../sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>browserify</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
// vanilla js
|
||||
|
||||
var Masonry = require('../../masonry');
|
||||
|
||||
new Masonry( '#basic', {
|
||||
columnWidth: 60
|
||||
});
|
||||
|
||||
// jquery
|
||||
|
||||
// var $ = require('jquery');
|
||||
// var jQBridget = require('jquery-bridget');
|
||||
// var Masonry = require('../../masonry');
|
||||
//
|
||||
// $.bridget( 'masonry', Masonry );
|
||||
//
|
||||
// $('#basic').masonry({
|
||||
// columnWidth: 60
|
||||
// });
|
||||
@@ -1,69 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>element sizing</title>
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
<style>
|
||||
/* #container { width: 501px; }*/
|
||||
.item, .grid-sizer { width: 20%; }
|
||||
.item.w2 { width: 40%; }
|
||||
.item.w3 { width: 60%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>element sizing</h1>
|
||||
|
||||
<div id="container" class="container">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
var container = document.querySelector('#container');
|
||||
var msnry = new Masonry( container, {
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,68 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>fit width</title>
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>fit width</h1>
|
||||
|
||||
<div class="container">
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h3"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item w2 h3"></div>
|
||||
<div class="item w4"></div>
|
||||
<div class="item w2"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
var msnry = new Masonry( '.container', {
|
||||
isFitWidth: true,
|
||||
columnWidth: 120
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>fluid</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
.grid:after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.grid-sizer,
|
||||
.grid-item {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
border: 1px solid;
|
||||
background: #09F;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid-item--width2 { width: 50%; }
|
||||
|
||||
.grid-item--height2 { height: 160px; }
|
||||
|
||||
.grid-item--height3 { height: 220px; }
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>fluid</h1>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="grid-item grid-item--width2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--height3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--width2 grid-item--height2"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item grid-item--width2"></div>
|
||||
<div class="grid-item grid-item--height3"></div>
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
window.msnry = new Masonry( '.grid', {
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>jQuery</title>
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>jQuery</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
$( function() {
|
||||
|
||||
$('#basic').masonry({
|
||||
columnWidth: 60
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>require js</title>
|
||||
|
||||
<link rel="stylesheet" href="../sandbox.css" />
|
||||
<script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>require js</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,69 +0,0 @@
|
||||
/*global requirejs: false*/
|
||||
|
||||
// -------------------------- pkgd -------------------------- //
|
||||
|
||||
/*
|
||||
requirejs( [ '../../dist/masonry.pkgd' ], function( Masonry ) {
|
||||
new Masonry( document.querySelector('#basic') );
|
||||
});
|
||||
// */
|
||||
|
||||
// -------------------------- bower -------------------------- //
|
||||
|
||||
/*
|
||||
requirejs.config({
|
||||
baseUrl: '../bower_components'
|
||||
});
|
||||
|
||||
requirejs( [ '../masonry' ], function( Masonry ) {
|
||||
new Masonry( document.querySelector('#basic') );
|
||||
});
|
||||
// */
|
||||
|
||||
// -------------------------- pkgd & jQuery -------------------------- //
|
||||
|
||||
// /*
|
||||
requirejs.config({
|
||||
paths: {
|
||||
jquery: '../../bower_components/jquery/dist/jquery'
|
||||
}
|
||||
});
|
||||
|
||||
requirejs( [ 'require', 'jquery', '../../dist/masonry.pkgd' ],
|
||||
function( require, $, Masonry ) {
|
||||
require( [
|
||||
'jquery-bridget/jquery.bridget'
|
||||
],
|
||||
function() {
|
||||
$.bridget( 'masonry', Masonry );
|
||||
$('#basic').masonry({
|
||||
columnWidth: 60
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
// */
|
||||
|
||||
// -------------------------- bower & jQuery -------------------------- //
|
||||
|
||||
/*
|
||||
requirejs.config({
|
||||
baseUrl: '../bower_components',
|
||||
paths: {
|
||||
jquery: 'jquery/dist/jquery'
|
||||
}
|
||||
});
|
||||
|
||||
requirejs( [
|
||||
'jquery',
|
||||
'../masonry',
|
||||
'jquery-bridget/jquery.bridget'
|
||||
],
|
||||
function( $, Masonry ) {
|
||||
$.bridget( 'masonry', Masonry );
|
||||
$('#basic').masonry({
|
||||
columnWidth: 60
|
||||
});
|
||||
}
|
||||
);
|
||||
// */
|
||||
@@ -1,120 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>right to left</title>
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
#stamped .stamp1 {
|
||||
width: 30%;
|
||||
height: 100px;
|
||||
left: 30%;
|
||||
top: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#stamped .stamp2 {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
left: 20px;
|
||||
top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>right to left</h1>
|
||||
|
||||
<div id="basic" class="container">
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<div id="stamped" class="container">
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item w2 h2"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h4"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h5"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item w2 h5"></div>
|
||||
<div class="item w2"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item w3"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
( function() {
|
||||
var container = document.querySelector('#basic');
|
||||
var msnry = new Masonry( container, {
|
||||
isOriginLeft: false,
|
||||
columnWidth: 60
|
||||
});
|
||||
})();
|
||||
|
||||
( function() {
|
||||
var container = document.querySelector('#stamped');
|
||||
var msnry = new Masonry( container, {
|
||||
itemSelector: '.item',
|
||||
isOriginLeft: false,
|
||||
columnWidth: 60,
|
||||
gutter: 10,
|
||||
stamp: '.stamp'
|
||||
});
|
||||
})();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #EEE;
|
||||
width: 50%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
background: #09F;
|
||||
}
|
||||
|
||||
.item.w2 { width: 120px; }
|
||||
.item.w3 { width: 180px; }
|
||||
.item.w4 { width: 240px; }
|
||||
|
||||
.item.h2 { height: 100px; }
|
||||
.item.h3 { height: 160px; }
|
||||
.item.h4 { height: 220px; }
|
||||
.item.h5 { height: 280px; }
|
||||
|
||||
.stamp {
|
||||
background: red;
|
||||
opacity: 0.75;
|
||||
position: absolute;
|
||||
border: 1px solid;
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>stamps</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="sandbox.css" />
|
||||
|
||||
<style>
|
||||
|
||||
#alpha .stamp1 {
|
||||
width: 30%;
|
||||
height: 100px;
|
||||
left: 30%;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#alpha .stamp2 {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
left: 20px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
#beta {
|
||||
border-style: solid;
|
||||
border-width: 40px 30px 20px 10px;
|
||||
padding: 10px 20px 30px 40px;
|
||||
}
|
||||
|
||||
#beta .stamp1 {
|
||||
width: 30%;
|
||||
height: 100px;
|
||||
left: 10%;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#beta .stamp2 {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
right: 20px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>stamps</h1>
|
||||
|
||||
<div id="alpha" class="container">
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<div id="beta" class="container">
|
||||
<div class="stamp stamp2"></div>
|
||||
<div class="stamp stamp1"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item h2"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h3"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item h4"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
||||
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
|
||||
<script src="../bower_components/eventie/eventie.js"></script>
|
||||
<script src="../bower_components/doc-ready/doc-ready.js"></script>
|
||||
<script src="../bower_components/get-style-property/get-style-property.js"></script>
|
||||
<script src="../bower_components/get-size/get-size.js"></script>
|
||||
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
|
||||
<script src="../bower_components/matches-selector/matches-selector.js"></script>
|
||||
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
|
||||
<script src="../bower_components/outlayer/item.js"></script>
|
||||
<script src="../bower_components/outlayer/outlayer.js"></script>
|
||||
|
||||
<script src="../masonry.js"></script>
|
||||
|
||||
<script>
|
||||
docReady( function() {
|
||||
( function() {
|
||||
var container = document.querySelector('#alpha');
|
||||
var msnry = new Masonry( container, {
|
||||
itemSelector: '.item',
|
||||
columnWidth: 60,
|
||||
gutter: 10,
|
||||
stamp: '.stamp'
|
||||
});
|
||||
|
||||
})();
|
||||
( function() {
|
||||
var container = document.querySelector('#beta');
|
||||
var msnry = new Masonry( container, {
|
||||
columnWidth: 60,
|
||||
gutter: 10,
|
||||
stamp: '.stamp'
|
||||
});
|
||||
|
||||
})();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user