Skip to content

Instantly share code, notes, and snippets.

Created February 3, 2016 12:44
First try with Masonry for DINOFUN

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.

<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>
// 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';
}
};
* {
-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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment