initial commit
This commit is contained in:
commit
1aaa7da78a
1
.gitiginore
Normal file
1
.gitiginore
Normal file
|
|
@ -0,0 +1 @@
|
|||
.idea
|
||||
23
LICENSE.md
Normal file
23
LICENSE.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
Copyright (c) 2015, terribleplan
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright notice,
|
||||
this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND ANY
|
||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
||||
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
||||
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
|
||||
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
|
||||
OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
|
||||
DAMAGE.
|
||||
32
README.md
Normal file
32
README.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
TileFlooring.js
|
||||
===============
|
||||
You want a masonry-style layout? You got it.
|
||||
|
||||
I got sick of isotope/masonry, so decided to write this. Right now it takes a very simple approach and is a little limited in what it can do.
|
||||
|
||||
This simply figures out how many columns to make, and then puts things into those columns.
|
||||
|
||||
Usage
|
||||
=====
|
||||
```javascript
|
||||
var floor = new TileFloor(myDivElement, {
|
||||
elementSelector: ".item",
|
||||
columns: {
|
||||
maxWidth: 200,
|
||||
maxCount: 5
|
||||
}
|
||||
});
|
||||
```
|
||||
And now you have 5 columns that are each a maximum of 200px wide. If you only have 620px to work with, you get 4 columns, 600 gets 3, etc.
|
||||
|
||||
TileFlooring.js automatically responds to width changes through a combination of CSS, styles, and javascript, but only needs to run intensive javascript if the number of columns is changed, everything else is done by styles!
|
||||
|
||||
Limitations
|
||||
===========
|
||||
TileFlooring does not (and will not) work on browsers that do not have proper HTML5 support, sorry. Not worth the trouble or cruft.
|
||||
|
||||
TileFlooring.js is a young project and not all features are implemented yet. There are plans to add more options to the column layout, the ability to dynamically add elements without having to recreate the floor, the ability to actually destroy a floor, and more layout options.
|
||||
|
||||
Contributing
|
||||
============
|
||||
Just send a PR, as long as you're cool with publishing your code under the BSD license.
|
||||
80
index.html
Normal file
80
index.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<script src="tile.js" type="application/javascript"></script>
|
||||
<script type="application/javascript">
|
||||
window.onload =function() {
|
||||
new TileFloor(document.getElementById("master"), {
|
||||
elementSelector: ".item",
|
||||
columns: {
|
||||
maxWidth: 200,
|
||||
maxCount: 5
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
#master {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
}
|
||||
.item, .important {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="master">
|
||||
<div class="important">
|
||||
<p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar mauris quis lacus molestie convallis. Praesent quis libero ut dolor posuere congue et eget ligula. Sed pharetra vel arcu vitae faucibus. Nunc vitae dolor nec lectus dapibus finibus ut sed orci. Nulla aliquam luctus augue et laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ipsum ultrices, laoreet leo quis, blandit nulla. Morbi rhoncus pellentesque gravida. Aliquam ultrices elit at neque fringilla porta. Sed lobortis, dolor a volutpat fermentum, odio ex auctor risus, eget rutrum ex dolor sit amet ex. Proin sit amet dui vitae libero mattis volutpat. Pellentesque mattis, libero eu lacinia tincidunt, nibh nisi dignissim mi, sit amet ultrices felis elit in arcu. Sed eros nibh, vestibulum in arcu ut, pretium suscipit tortor. Nullam condimentum nec diam in gravida. Nunc iaculis congue diam, ac blandit turpis iaculis at. Donec ipsum dolor, tincidunt sed varius sed, scelerisque imperdiet augue. Nam dignissim sem velit, eget semper lorem viverra eget. Nullam lorem dui, egestas et nulla finibus, lacinia cursus purus. Quisque varius velit in luctus molestie. In tincidunt sagittis tellus, at venenatis libero facilisis in. Pellentesque arcu massa, convallis in magna ut, molestie rhoncus velit. Sed posuere arcu porta placerat finibus. Donec massa nisi, imperdiet ac tellus vitae, vulputate finibus nibh. Mauris eleifend neque quis nunc pulvinar, eget lacinia diam porta. Curabitur convallis pretium interdum. Aenean nec finibus diam, ut hendrerit velit. Donec et imperdiet nisi. Suspendisse fringilla lectus at purus imperdiet congue. Integer tellus eros, vulputate vitae dapibus eget, accumsan quis leo. Etiam purus eros, tincidunt in congue quis, consequat eget tellus. In eleifend pharetra erat, eu ultrices felis laoreet ut. Etiam ultricies mi non augue tempor porta et id eros. Donec iaculis ligula massa, eu gravida mauris sollicitudin in. Ut dignissim dui ultricies nulla egestas, id tincidunt nisi consequat. Quisque pulvinar porta justo nec vestibulum. Nullam congue auctor euismod. Suspendisse condimentum magna eu nisl placerat, sed sollicitudin magna posuere. Vestibulum et est et eros fermentum faucibus et vel ex. Donec ut odio vel ipsum volutpat convallis eu a felis. Nunc euismod, magna et molestie viverra, augue mauris efficitur lorem, ac venenatis quam mi id quam. Pellentesque ac felis eu erat sodales varius vel sit amet turpis. Donec enim justo, finibus ac sapien eget, interdum sodales erat. Quisque ut leo in neque scelerisque vestibulum. Fusce mollis diam sed lacinia congue. Nulla vestibulum, risus in auctor placerat, augue nisl porta felis, non tempus enim massa vel mi. In sit amet pharetra velit. Morbi porttitor nulla quis sapien pharetra elementum. Duis scelerisque porttitor imperdiet. Maecenas a auctor felis. Integer eu quam sed nibh ornare viverra non id sem. Donec libero tellus, congue imperdiet quam eu, mattis pellentesque est. Nulla fermentum mauris eget nisi lobortis tristique sit amet in tortor. Sed in porttitor nibh. Maecenas sit amet tristique justo. Mauris aliquam ornare felis, eu congue lorem vestibulum nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec risus luctus est scelerisque semper in at lorem. Suspendisse pretium ultricies consequat. Quisque dapibus nisi neque, a facilisis nisi euismod at. Donec pharetra commodo ante, nec commodo lectus pharetra a. Proin bibendum dapibus vehicula. Duis vel mauris tempus, tempus diam eget, molestie est. Phasellus volutpat congue placerat. Sed sed mollis dolor. Praesent interdum in nibh nec scelerisque.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar mauris quis lacus molestie convallis. Praesent quis libero ut dolor posuere congue et eget ligula. Sed pharetra vel arcu vitae faucibus. Nunc vitae dolor nec lectus dapibus finibus ut sed orci. Nulla aliquam luctus augue et laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ipsum ultrices, laoreet leo quis, blandit nulla. Morbi rhoncus pellentesque gravida. Aliquam ultrices elit at neque fringilla porta. Sed lobortis, dolor a volutpat fermentum, odio ex auctor risus, eget rutrum ex dolor sit amet ex. Proin sit amet dui vitae libero mattis volutpat. Pellentesque mattis, libero eu lacinia tincidunt, nibh nisi dignissim mi, sit amet ultrices felis elit in arcu. Sed eros nibh, vestibulum in arcu ut, pretium suscipit tortor.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>2 Nullam condimentum nec diam in gravida. Nunc iaculis congue diam, ac blandit turpis iaculis at. Donec ipsum dolor, tincidunt sed varius sed, scelerisque imperdiet augue. Nam dignissim sem velit, eget semper lorem viverra eget. Nullam lorem dui, egestas et nulla finibus, lacinia cursus purus. Quisque varius velit in luctus molestie. In tincidunt sagittis tellus, at venenatis libero facilisis in. Pellentesque arcu massa, convallis in magna ut, molestie rhoncus velit. Sed posuere arcu porta placerat finibus. Donec massa nisi, imperdiet ac tellus vitae, vulputate finibus nibh. Mauris eleifend neque quis nunc pulvinar, eget lacinia diam porta. Curabitur convallis pretium interdum. Aenean nec finibus diam, ut hendrerit velit. Donec et imperdiet nisi.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>3 Suspendisse fringilla lectus at purus imperdiet congue. Integer tellus eros, vulputate vitae dapibus eget, accumsan quis leo. Etiam purus eros, tincidunt in congue quis, consequat eget tellus. In eleifend pharetra erat, eu ultrices felis laoreet ut. Etiam ultricies mi non augue tempor porta et id eros. Donec iaculis ligula massa, eu gravida mauris sollicitudin in. Ut dignissim dui ultricies nulla egestas, id tincidunt nisi consequat. Quisque pulvinar porta justo nec vestibulum. Nullam congue auctor euismod. Suspendisse condimentum magna eu nisl placerat, sed sollicitudin magna posuere. Vestibulum et est et eros fermentum faucibus et vel ex. Donec ut odio vel ipsum volutpat convallis eu a felis. Nunc euismod, magna et molestie viverra, augue mauris efficitur lorem, ac venenatis quam mi id quam. Pellentesque ac felis eu erat sodales varius vel sit amet turpis. Donec enim justo, finibus ac sapien eget, interdum sodales erat.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>4 Quisque ut leo in neque scelerisque vestibulum. Fusce mollis diam sed lacinia congue. Nulla vestibulum, risus in auctor placerat, augue nisl porta felis, non tempus enim massa vel mi. In sit amet pharetra velit. Morbi porttitor nulla quis sapien pharetra elementum. Duis scelerisque porttitor imperdiet. Maecenas a auctor felis.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>5 Integer eu quam sed nibh ornare viverra non id sem. Donec libero tellus, congue imperdiet quam eu, mattis pellentesque est. Nulla fermentum mauris eget nisi lobortis tristique sit amet in tortor. Sed in porttitor nibh. Maecenas sit amet tristique justo. Mauris aliquam ornare felis, eu congue lorem vestibulum nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec risus luctus est scelerisque semper in at lorem. Suspendisse pretium ultricies consequat. Quisque dapibus nisi neque, a facilisis nisi euismod at. Donec pharetra commodo ante, nec commodo lectus pharetra a. Proin bibendum dapibus vehicula. Duis vel mauris tempus, tempus diam eget, molestie est. Phasellus volutpat congue placerat. Sed sed mollis dolor. Praesent interdum in nibh nec scelerisque.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar mauris quis lacus molestie convallis. Praesent quis libero ut dolor posuere congue et eget ligula. Sed pharetra vel arcu vitae faucibus. Nunc vitae dolor nec lectus dapibus finibus ut sed orci. Nulla aliquam luctus augue et laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ipsum ultrices, laoreet leo quis, blandit nulla. Morbi rhoncus pellentesque gravida. Aliquam ultrices elit at neque fringilla porta. Sed lobortis, dolor a volutpat fermentum, odio ex auctor risus, eget rutrum ex dolor sit amet ex. Proin sit amet dui vitae libero mattis volutpat. Pellentesque mattis, libero eu lacinia tincidunt, nibh nisi dignissim mi, sit amet ultrices felis elit in arcu. Sed eros nibh, vestibulum in arcu ut, pretium suscipit tortor.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>7 Nullam condimentum nec diam in gravida. Nunc iaculis congue diam, ac blandit turpis iaculis at. Donec ipsum dolor, tincidunt sed varius sed, scelerisque imperdiet augue. Nam dignissim sem velit, eget semper lorem viverra eget. Nullam lorem dui, egestas et nulla finibus, lacinia cursus purus. Quisque varius velit in luctus molestie. In tincidunt sagittis tellus, at venenatis libero facilisis in. Pellentesque arcu massa, convallis in magna ut, molestie rhoncus velit. Sed posuere arcu porta placerat finibus. Donec massa nisi, imperdiet ac tellus vitae, vulputate finibus nibh. Mauris eleifend neque quis nunc pulvinar, eget lacinia diam porta. Curabitur convallis pretium interdum. Aenean nec finibus diam, ut hendrerit velit. Donec et imperdiet nisi.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>8 Suspendisse fringilla lectus at purus imperdiet congue. Integer tellus eros, vulputate vitae dapibus eget, accumsan quis leo. Etiam purus eros, tincidunt in congue quis, consequat eget tellus. In eleifend pharetra erat, eu ultrices felis laoreet ut. Etiam ultricies mi non augue tempor porta et id eros. Donec iaculis ligula massa, eu gravida mauris sollicitudin in. Ut dignissim dui ultricies nulla egestas, id tincidunt nisi consequat. Quisque pulvinar porta justo nec vestibulum. Nullam congue auctor euismod. Suspendisse condimentum magna eu nisl placerat, sed sollicitudin magna posuere. Vestibulum et est et eros fermentum faucibus et vel ex. Donec ut odio vel ipsum volutpat convallis eu a felis. Nunc euismod, magna et molestie viverra, augue mauris efficitur lorem, ac venenatis quam mi id quam. Pellentesque ac felis eu erat sodales varius vel sit amet turpis. Donec enim justo, finibus ac sapien eget, interdum sodales erat.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>9 Quisque ut leo in neque scelerisque vestibulum. Fusce mollis diam sed lacinia congue. Nulla vestibulum, risus in auctor placerat, augue nisl porta felis, non tempus enim massa vel mi. In sit amet pharetra velit. Morbi porttitor nulla quis sapien pharetra elementum. Duis scelerisque porttitor imperdiet. Maecenas a auctor felis.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>10 Integer eu quam sed nibh ornare viverra non id sem. Donec libero tellus, congue imperdiet quam eu, mattis pellentesque est. Nulla fermentum mauris eget nisi lobortis tristique sit amet in tortor. Sed in porttitor nibh. Maecenas sit amet tristique justo. Mauris aliquam ornare felis, eu congue lorem vestibulum nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec risus luctus est scelerisque semper in at lorem. Suspendisse pretium ultricies consequat. Quisque dapibus nisi neque, a facilisis nisi euismod at. Donec pharetra commodo ante, nec commodo lectus pharetra a. Proin bibendum dapibus vehicula. Duis vel mauris tempus, tempus diam eget, molestie est. Phasellus volutpat congue placerat. Sed sed mollis dolor. Praesent interdum in nibh nec scelerisque.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar mauris quis lacus molestie convallis. Praesent quis libero ut dolor posuere congue et eget ligula. Sed pharetra vel arcu vitae faucibus. Nunc vitae dolor nec lectus dapibus finibus ut sed orci. Nulla aliquam luctus augue et laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet ipsum ultrices, laoreet leo quis, blandit nulla. Morbi rhoncus pellentesque gravida. Aliquam ultrices elit at neque fringilla porta. Sed lobortis, dolor a volutpat fermentum, odio ex auctor risus, eget rutrum ex dolor sit amet ex. Proin sit amet dui vitae libero mattis volutpat. Pellentesque mattis, libero eu lacinia tincidunt, nibh nisi dignissim mi, sit amet ultrices felis elit in arcu. Sed eros nibh, vestibulum in arcu ut, pretium suscipit tortor.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>12 Nullam condimentum nec diam in gravida. Nunc iaculis congue diam, ac blandit turpis iaculis at. Donec ipsum dolor, tincidunt sed varius sed, scelerisque imperdiet augue. Nam dignissim sem velit, eget semper lorem viverra eget. Nullam lorem dui, egestas et nulla finibus, lacinia cursus purus. Quisque varius velit in luctus molestie. In tincidunt sagittis tellus, at venenatis libero facilisis in. Pellentesque arcu massa, convallis in magna ut, molestie rhoncus velit. Sed posuere arcu porta placerat finibus. Donec massa nisi, imperdiet ac tellus vitae, vulputate finibus nibh. Mauris eleifend neque quis nunc pulvinar, eget lacinia diam porta. Curabitur convallis pretium interdum. Aenean nec finibus diam, ut hendrerit velit. Donec et imperdiet nisi.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>13 Suspendisse fringilla lectus at purus imperdiet congue. Integer tellus eros, vulputate vitae dapibus eget, accumsan quis leo. Etiam purus eros, tincidunt in congue quis, consequat eget tellus. In eleifend pharetra erat, eu ultrices felis laoreet ut. Etiam ultricies mi non augue tempor porta et id eros. Donec iaculis ligula massa, eu gravida mauris sollicitudin in. Ut dignissim dui ultricies nulla egestas, id tincidunt nisi consequat. Quisque pulvinar porta justo nec vestibulum. Nullam congue auctor euismod. Suspendisse condimentum magna eu nisl placerat, sed sollicitudin magna posuere. Vestibulum et est et eros fermentum faucibus et vel ex. Donec ut odio vel ipsum volutpat convallis eu a felis. Nunc euismod, magna et molestie viverra, augue mauris efficitur lorem, ac venenatis quam mi id quam. Pellentesque ac felis eu erat sodales varius vel sit amet turpis. Donec enim justo, finibus ac sapien eget, interdum sodales erat.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>14 Quisque ut leo in neque scelerisque vestibulum. Fusce mollis diam sed lacinia congue. Nulla vestibulum, risus in auctor placerat, augue nisl porta felis, non tempus enim massa vel mi. In sit amet pharetra velit. Morbi porttitor nulla quis sapien pharetra elementum. Duis scelerisque porttitor imperdiet. Maecenas a auctor felis.</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>15 Integer eu quam sed nibh ornare viverra non id sem. Donec libero tellus, congue imperdiet quam eu, mattis pellentesque est. Nulla fermentum mauris eget nisi lobortis tristique sit amet in tortor. Sed in porttitor nibh. Maecenas sit amet tristique justo. Mauris aliquam ornare felis, eu congue lorem vestibulum nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec risus luctus est scelerisque semper in at lorem. Suspendisse pretium ultricies consequat. Quisque dapibus nisi neque, a facilisis nisi euismod at. Donec pharetra commodo ante, nec commodo lectus pharetra a. Proin bibendum dapibus vehicula. Duis vel mauris tempus, tempus diam eget, molestie est. Phasellus volutpat congue placerat. Sed sed mollis dolor. Praesent interdum in nibh nec scelerisque.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
126
tile.js
Normal file
126
tile.js
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
var TileFloor = (function() {
|
||||
function elementSuicide(element) {
|
||||
if (element.parentElement !== null) {
|
||||
element.parentElement.removeChild(element);
|
||||
}
|
||||
}
|
||||
if (typeof document.querySelectorAll !== "function") {
|
||||
throw new Error("TileFloor is only compatible with HTML5 browsers");
|
||||
}
|
||||
|
||||
function TileElement(element) {
|
||||
this.element = element;
|
||||
this.originalParent = element.parent;
|
||||
}
|
||||
TileElement.prototype.removeSelf = function removeSelf() {
|
||||
elementSuicide(this.element);
|
||||
};
|
||||
|
||||
function TileElementContainer(element) {
|
||||
this.element = element;
|
||||
}
|
||||
TileElementContainer.prototype.removeSelf = TileElement.prototype.removeSelf;
|
||||
TileElementContainer.prototype.height = function height() {
|
||||
return this.element.offsetHeight;
|
||||
};
|
||||
TileElementContainer.prototype.addChild = function addChild(child) {
|
||||
return this.element.appendChild(child);
|
||||
};
|
||||
|
||||
function Tile(element, options) {
|
||||
if (!element.tagName || typeof element.querySelectorAll !== "function") {
|
||||
throw new Error("The first argument must be a DOM Element");
|
||||
}
|
||||
if (!options.hasOwnProperty("elementSelector")) {
|
||||
throw new Error("You must define an element selector");
|
||||
}
|
||||
if (options.hasOwnProperty("columns")) {
|
||||
if (!options.columns.hasOwnProperty("maxWidth")) {
|
||||
throw new Error("You must define a max width for your columns");
|
||||
}
|
||||
if (!options.columns.hasOwnProperty("maxCount")) {
|
||||
options.columns.maxCount = Infinity;
|
||||
}
|
||||
} else {
|
||||
throw new Error("The only display mode is `columns`");
|
||||
}
|
||||
this.masterElement = element;
|
||||
this.destroyed = false;
|
||||
this.options = options;
|
||||
this.elements = Array.prototype.map.call(element.querySelectorAll(options.elementSelector), function (element) {
|
||||
return new TileElement(element)
|
||||
});
|
||||
this.containers = [];
|
||||
this.containerElement = null;
|
||||
var cssPostfix = "-generated-tf" + Math.floor(Math.random() * 10000);
|
||||
this.clearfixClassName = "clearfix" + cssPostfix;
|
||||
this.columnClassName = "responsive-column" + cssPostfix;
|
||||
this.clearfixStylesheet = document.createElement("style");
|
||||
document.head.appendChild(this.clearfixStylesheet);
|
||||
this.clearfixStylesheet.sheet.insertRule("." + this.clearfixClassName + ":after{content:\"\";display:table;clear:both}", 0);
|
||||
this.clearfixStylesheet.sheet.insertRule("." + this.columnClassName + "{float:left;max-width:" + options.columns.maxWidth + "px}",0);
|
||||
this.flow();
|
||||
|
||||
//Adjust columns when the window is resized
|
||||
var _this = this;
|
||||
this.onResize = function onResize() {
|
||||
var newColumnCount = _this.determineColumns();
|
||||
if (_this.containers.length !== newColumnCount) {
|
||||
return _this.flow();
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', this.onResize, false);
|
||||
}
|
||||
function goAway(element) {
|
||||
element.removeSelf();
|
||||
}
|
||||
function create() {
|
||||
return document.createElement("div");
|
||||
}
|
||||
function shortest(arr) {
|
||||
var shortIndex = 0, shortHeight = Infinity;
|
||||
arr.forEach(function(container, i) {
|
||||
var h = container.height();
|
||||
if (h < shortHeight) {
|
||||
shortIndex = i;
|
||||
shortHeight = h;
|
||||
}
|
||||
});
|
||||
return arr[shortIndex];
|
||||
}
|
||||
|
||||
Tile.prototype.flow = function flow() {
|
||||
var _this = this;
|
||||
if (this.containerElement !== null) {
|
||||
elementSuicide(this.containerElement);
|
||||
}
|
||||
this.elements.forEach(goAway);
|
||||
this.containers.forEach(goAway);
|
||||
|
||||
var columnCount = this.determineColumns();
|
||||
if (columnCount === 0) {
|
||||
throw new Error("Cowardly refusing to flow elements into 0 columns");
|
||||
}
|
||||
this.containerElement = create();
|
||||
this.containerElement.className = this.clearfixClassName;
|
||||
|
||||
this.containers = (new Array(columnCount));
|
||||
for (var i = 0; i < columnCount; i++) {
|
||||
var div = create();
|
||||
div.className = _this.columnClassName;
|
||||
div.style.width = (100 / columnCount) + "%";
|
||||
_this.containerElement.appendChild(div);
|
||||
this.containers[i] = new TileElementContainer(div);
|
||||
}
|
||||
this.masterElement.appendChild(this.containerElement);
|
||||
this.elements.forEach(function(newChild) {
|
||||
shortest(_this.containers).addChild(newChild.element);
|
||||
});
|
||||
};
|
||||
|
||||
Tile.prototype.determineColumns = function determineColumns() {
|
||||
return Math.min(Math.ceil(this.masterElement.offsetWidth / this.options.columns.maxWidth), this.options.columns.maxCount);;
|
||||
};
|
||||
|
||||
return Tile;
|
||||
})();
|
||||
Loading…
Reference in a new issue