80 lines
16 KiB
HTML
80 lines
16 KiB
HTML
<!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> |