Masonry plugin
Viral,
<!DOCTYPE html>
<html class=''>
<head>
<meta charset='UTF-8'>
<style class="cp-pen-styles">* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.masonry {
background: #EEE;
max-width: 240px;
}
/* clearfix */
.masonry:after {
content: '';
display: block;
clear: both;
}
.masonry .item {
width: 60px;
height: 60px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.item.gigante {
width: 120px;
height: 120px;
}
.item:hover {
background: #A2C;
border-color: white;
cursor: pointer;
}
#notification {
position: fixed;
background: black;
opacity: 0;
color: white;
font-size: 16px;
padding: 0.5em;
right: 0;
top: 0;
}</style></head><body>
<h1>Masonry - layoutComplete</h1>
<p>Сlick item to toggle size</p>
<div class="masonry">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>
<div id="notification"></div>
<script src='http://masonry.desandro.com/masonry.pkgd.js'></script>
<script src='https://rawgithub.com/desandro/classie/master/classie.js'></script>
<script>
var notifElem;
docReady(function () {
var container = document.querySelector('.masonry');
notifElem = document.querySelector('#notification');
var msnry = new Masonry(container, { columnWidth: 60 });
msnry.on('layoutComplete', function (laidOutItems) {
notify('Masonry layout completed on ' + laidOutItems.length + ' items');
});
var old;
eventie.bind(container, 'click', function (event) {
if (!classie.has(event.target, 'item')) {
return;
}
old && old != event.target && classie.remove(old, 'gigante');
classie.toggle(event.target, 'gigante');
old = event.target;
msnry.layout();
});
});
function timeStamp() {
var now = new Date();
var min = now.getMinutes();
min = min < 10 ? '0' + min : min;
var seconds = now.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
return [
now.getHours(),
min,
seconds
].join(':');
}
var docElem = document.documentElement;
var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText';
function setText(elem, value) {
elem[textSetter] = value;
}
var transitionProp = getStyleProperty('transition');
var notifyTimeout;
var hideTime = transitionProp ? 1000 : 1500;
function notify(message) {
message += ' at ' + timeStamp();
setText(notifElem, message);
if (transitionProp) {
notifElem.style[transitionProp] = 'none';
}
notifElem.style.display = 'block';
notifElem.style.opacity = '1';
if (notifyTimeout) {
clearTimeout(notifyTimeout);
}
notifyTimeout = setTimeout(hideNotify, hideTime);
}
;
function hideNotify() {
if (transitionProp) {
notifElem.style[transitionProp] = 'opacity 1.0s';
notifElem.style.opacity = '0';
} else {
notifElem.style.display = 'none';
}
}
;
</script>
</body></html>
|
