import from la bonne adresse and first refactoring for ouidade.com
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,110 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,19 @@
|
||||
// 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
|
||||
// });
|
||||
@@ -0,0 +1,69 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,69 @@
|
||||
/*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
|
||||
});
|
||||
}
|
||||
);
|
||||
// */
|
||||
@@ -0,0 +1,120 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,33 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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