index.html

<h1>Isotope - layoutComplete</h1>

<p>Click item to toggle size</p>

<div class="isotope">
  <div class="item width2"></div>
  <div class="item height2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item width2 height2"></div>
  <div class="item width2"></div>
  <div class="item width2"></div>
  <div class="item height2"></div>
  <div class="item"></div>
  <div class="item width2"></div>
  <div class="item height2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item width2"></div>
  <div class="item height2"></div>
  <div class="item"></div>
  <div class="item width2"></div>
  <div class="item height2"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="notification"></div>

Isotope---layoutComplete.markdown

Isotope - layoutComplete

A Pen by A Non Ymous on CodePen.

License.

script.js

// external js:
// http://isotope.metafizzy.co/beta/isotope.pkgd.js

var $notifElem;

$( function() {

  var $container = $('.isotope').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 100
    }
  });

  $notifElem = $('#notification');
  
  $container.isotope( 'on', 'layoutComplete', function( isoInstance, laidOutItems ) {
    notify( 'Isotope layout completed with ' + laidOutItems.length + ' items' );
  });
  
  $container.on( 'click', '.item', function() {
    // change size of item by toggling gigante class
    $('.isotope .item').removeClass('gigante');
    $( this ).toggleClass('gigante');
    $container.isotope('layout');
  });
  
});


// --------- timestamp ----------- //

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(':');
}

// -------------------------- notify -------------------------- //

var transitionProp = getStyleProperty('transition');

var notifyTimeout;
var hideTime = transitionProp ? 1000 : 1500;

function notify( message ) {
  message += ' at ' + timeStamp();
  $notifElem.text( message );

  var style = {};
  
  if ( transitionProp ) {
    style[ transitionProp ] = 'none';
  }
  style.display = 'block';
  style.opacity = 1;
  $notifElem.css( style );

  // hide the notification after a second
  if ( notifyTimeout ) {
    clearTimeout( notifyTimeout );
  }

  notifyTimeout = setTimeout( hideNotify, hideTime );
};

function hideNotify() {
  var style = {};
  if ( transitionProp ) {
    style[ transitionProp ] = 'opacity 1.0s';
    style.opacity = '0';
  } else {
    style.display = 'none';
  }
  $notifElem.css( style );
};

style.css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- isotope ---- */

.isotope {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .item ---- */

.item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.item.width2 { width: 200px; }
.item.height2 { height: 200px; }

.item:hover {
  background: #8CF;
  cursor: pointer;
}

.item.gigante {
  width: 200px;
  height: 300px;
  background: #F80;
}

#notification {
  position: fixed;
  background: black;
  opacity: 0;
  color: white;
  font-size: 16px;
  padding: 0.5em;
  right: 0;
  top: 0;
}