First try with Masonry for DINOFUN

First try with Masonry for DINOFUN.markdown

First try with Masonry for DINOFUN

Not really sure how to get all of this on my website, but I like the way it looks.

A Pen by Tony Owens on CodePen.

License.

index.html

<h1>Masonry - layoutComplete</h1>
<p>Resize browser or click item to toggle size</p>

<div class="masonry">
  
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/raptortrap"> 
  <img src="http://www.dinofun.com/raptortrap/raptorlogo.png" alt="Raptor Trap" title="Raptor Trap T-Rex and collect your candy">        
  </a> 
  Raptor Trap- Trap the T-Rex
  </div>
  

  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinotoss/index.html"> 
  <img src="http://www.dinofun.com/dinotoss/dinotoss.png" border="0" width=120  alt="Dinosaur Egg Toss Game" title="Launch eggs at the      dinosaurs that try to steal  your candy"> 
  </a> 
  Dino Toss- Launch eggs at the dinosaurs 
  </div>
 

  <div class="item w2 h3">
  <a href="http://www.dinofun.com/boulderbust"> 
  <img src="http://www.dinofun.com/boulderbust/logo2.png" border="0"  alt="Dinosaur Boulder Bust" title="Dinosaur Bolder Bust Dinosaur game"> 
  </a> 
  Dinosaur Bolder Bust- jump and run and bust the boulders. 
  </div>
  

  <div class="item w2 h3">
  <a href="http://www.dinofun.com/tarpit/index.html"> 
  <img src="http://www.dinofun.com/tarpit/tarpit_logo.gif" width=120  alt="Dinosaur Tar Pit Game" title="Dinosaur Games-keep the Dinosaur out of the Tar Pit">        
  </a> 
  Dinosaur Tar Pit Game-driving game. Cover the tarpit with grass in this Dinosaur Game.
  </div>
 


  <div class="item w3 h4">
  <a href="http://www.dinofun.com/dinorunrun"> 
  <img src="http://www.dinofun.com/dinorunrun/indexlogo.png"  alt="DinoRun" title="Dinosaur running game"> 
  </a> 
  Dino Run Run-Drive your lawnmower to clean up the grass. Collect prizes by jumping on the garbage.
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/bustn/prg.html"> 
  <img src="http://www.dinofun.com/bustn/bub2.gif" border ="0" alt="Dino Jump Game" title="Dino Jump Game- jump over the bad T Rex">        
  </a>
  Dino Jump Game- jump over the bad T Rex. Like Mario Bros.
  </div>
  
  
  
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinoconnect/dinoconnect.html"> 
  <img src="http://www.dinofun.com/dinoconnect/dinosaur_connect.gif" border="0"  alt="Kids Dinosaur Connect 4 Game" title="Kids Dinosaur Connect 4 Game-connect 4 dinosaurs in a row to win"> 
  </a> 
  Dinosaur connect 4 dinosaurs in a row to win
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinocastle/index.html"> 
  <img src="http://www.dinofun.com/dinocastle/logo.gif" border="0"   alt="Dinosaur Castle Game" title="Dinosaur Castle Games Quest"> 
  </a> 
  Dinosaur Quest- find the treasure in this dinosaur game.
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/antartica/Antartic_main/prg.htm"> 
  <img src="http://www.dinofun.com/antartica/antartica.gif" border ="0" alt="Ice Age Dinosaur Game" title="Ice Age Dinosaur Game- save the dinosaur princess" >        
  </a> 
  Ice Age Dinosaurs-save the dinosaur princess
  </div>
 


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/eggdrop/index.html"> 
  <img src="http://www.dinofun.com/eggdrop/eggdrop.gif" border="0"  alt="Dinosaur Egg Drop Game" title="Dinosaur Egg Drop Game-drop down on the eggs to complete a level." > 
  </a> 
  Dinosaur Egg Drop- clear all eggs to complete a level.
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.angrydinos.com"> 
  <img src="http://www.angrydinos.com/angrydinos.gif" border="0" alt="Angry Dinosaurs Game" title="Angry Dinosaurs Game-like Angry Birds"> 
  </a> 
  Angry Dinos! like Angry Birds
  </div>
  


  <div class="item w2 w3">
  <a href="http://www.dinofun.com/avoid"> 
  <img src="http://www.dinofun.com/avoid/avoid.gif" border="0" alt="Avoid the Dinos!" title="Avoid the Dinosaurs but collect the eggs"> 
  </a> 
  Avoid the Dinos! but collect the eggs
  </div>
 


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/superdinoegg/jrkong.html"> 
  <img src="http://www.dinofun.com/superdinoegg/superdinoegglogo_sm.gif" border="0" alt="Super Dino Egg Game" title="Super Dino Egg Game"> 
  </a> 
  Super Dinosaur<br> Egg Smash
  </div>
 


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinoquest/dinoquest.html"> 
  <img src="http://www.dinofun.com/dinoquest/sqrx.gif" border="0"   alt="Dinosaur Quest Game" title="Dinosaur Quest Game">        
  </a> 
  Dinosaur Quest 
  </div>
 


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinosaurcomics/comics.html"> 
  <img src="http://www.dinofun.com/dinosaurcomics/dinosaur_comics.gif" border="0"  alt="Dinosaur Comics" title="Dinosaur Comics-Funny Dinosaur comics for kids"> 
  </a> 
  Dinosaur Comics
  </div>
 


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinomatch/dinomatch.html"> 
  <img src="http://www.dinofun.com/ordergames/dinomatch.gif" border="0"   alt="Dinosaur Tyrannosaurus Match Game" title="Dinosaur Tyrannosaurus Match Game-Memory match games with Dinosaurs"> 
  </a> 
  Dinosaur Match  Memory match games with Dinosaurs
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/clipart/clipart.html"> 
  <img src="http://www.dinofun.com/clipart.jpg" border="0"   alt="Dinosaur Clipart" title="Dinosaur Clipart for teachers and educators"> 
  </a>
  Dinosaur Clipart and pictures
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinosaurcarnival"> 
  <img src="http://www.dinofun.com/dinosaurcarnival/logo2.png" border="0"  alt="Kids Dinosaur Carnival Game" title="Dinosaur Shooting gallery-Spell dinofun for bonus points"> 
  </a> 
  Dino Carnival- Dinosaur Shooting gallery
  </div>
  


  <div class="item w2 h3">
  <a href="http://www.dinofun.com/superdino/engine/main.htm"> 
  <img src="http://www.dinofun.com/ordergames/superdinob.gif" border="0"  alt="Super Mario Dinosaur Game" title="Super Mario Dinosaur Game"> 
  </a> 
  Super Dinosaur Bros
  </div>

  <div class="item w2 h3">
  <a href="http://www.dinofun.com/squash/dinosquash.html"> 
  <img src="http://www.dinofun.com/squash.gif" border="0"  alt="Squash the Dinosaurs Game" title="Squash the Dinosaurs Game"> 
  </a> 
  Dinosaur Squash- Push rocks to trap the dinos.
  </div>
  
  
  
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinocolor/color_dinosaurs.html"> 
  <img src="http://www.dinofun.com/dinocolor/color_tyrannosaurus_sm.gif" border="0"  alt="Dinosaur Rex coloring book" title="Dinosaur Rex Coloring Book for kids"> 
  </a> 
  Tyrannosaurus Rex Coloring Book for kids
  </div>
  
  
  
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/candydinos/index.html"> 
  <img src="http://www.dinofun.com/candydinos/candydinos.gif" border="0"  alt="Dinosaurs and Candy Game" title="Dinosaurs and Candy Game"> 
  </a> 
  Dinosaurs and Candy-jump and run to collect prizes.
  </div>
  
    
    
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/me and my dinosaur/me and my dinosaur.html"> 
  <img src="http://www.dinofun.com/me and my dinosaur/me and my dinosaur.gif" border="0"   alt="Me and my Dinosaur Game" title="Me and my Dinosaur Game"> 
  </a> 
  Me and My Dinosaur
  </div>
 
      
      
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/dinodrag/index.html"> 
  <img src="http://www.dinofun.com/dinodrag/game.png" border="0"  alt="Dinosaur Drag and Drop Game" title="Match dinosaur words with the correct dinosaur picture"> 
  </a> 
  Dinosaur Drag and Drop- Match dinosaur words
  </div>
 
        
        
        
  <div class="item w2 h3">
  <a href="http://www.dinofun.com/tetrisaurus/tetrisaurus.html"> 
  <img src="http://www.dinofun.com/ordergames/tetris.gif" border="0"   alt="Dinosaur Tetris" title="Dinosaur Tetris"> 
  </a> 
  Tetri Saurus- like Tetris
  </div>
  
        
        
        
        
        
</div>

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

script.js

// http://masonry.desandro.com/masonry.pkgd.js added as external resource
// https://rawgithub.com/desandro/classie/master/classie.js added

var notifElem;

docReady( function() {

  var container = document.querySelector('.masonry');
  notifElem = document.querySelector('#notification'); 
  var msnry = new Masonry( container, {
    columnWidth: 60
  });

  msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
    notify( 'Masonry layout completed on ' + laidOutItems.length + ' items' );
  });

  eventie.bind( container, 'click', function( event ) {
    // don't proceed if item was not clicked on
    if ( !classie.has( event.target, 'item' ) ) {
      return;
    }
    // change size of item via class
    classie.toggle( event.target, 'gigante' );
    // trigger layout
    msnry.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(':');
}

// ----- text helper ----- //

var docElem = document.documentElement;
var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText';

function setText( elem, value ) {
  elem[ textSetter ] = value;
}


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

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';

  // hide the notification after a second
  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';
  }
};

style.css

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

body { font-family: sans-serif; }

.masonry {
  background: #fff;
  max-width: 1024px;
}

/* clearfix */
.masonry:after {
  content: '';
  display: block;
  clear: both;
}

.masonry .item {
  width:  60px;
  height: 260px;
  float: left;
  background: #fff;
  border: 10px solid #fff;
  border-color: hsla(0, 0%, 0%, 0.8);
  border-radius: 5px;
}

.item.w2 { width:  140px; }
.item.w3 { width:  170px; }

.item.h2 { height: 120px; }
.item.h3 { height: 230px; }
.item.h4 { height: 280px; }

.item.gigante {
  width: 180px;
  height: 180px;
}

.item:hover {
  background: #eee;
  border-color: blue;
  cursor: pointer;
}

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