Skip to content

Instantly share code, notes, and snippets.

@conceptree
Created December 3, 2013 11:44
Show Gist options
  • Save conceptree/7767850 to your computer and use it in GitHub Desktop.
Save conceptree/7767850 to your computer and use it in GitHub Desktop.
Thumbnails Pinterest Like (YOU CAN SEE HOW TO CREATE OR DISPLAY THUMBNAILS DYNAMICALLY WITH JS IN MY JAVASCRIPT SECTION)
/*Tumbnails container*/
.tumb-cont{
display:block;
float:left;
overflow:hidden;
width:auto; height:auto;
-webkit-column-count:3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 10px;
column-fill: auto;
}
/*Tumbnail*/
.tumb{
display:block;
widht:300px; height:auto;
background:#ccc;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random Size Tumbnails</title>
</head>
<body>
<!---TUMBNAIL CONTAINER ----->
<div class="tumb-cont">
<!--- TUMBNAILS WITH A FREE HEIGHT ----->
<div class="tumb" id="tumb_1"><img src="../imgs/tumbnail_1.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_2"><img src="../imgs/tumbnail_2.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_3"><img src="../imgs/tumbnail_3.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_4"><img src="../imgs/tumbnail_4.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_5"><img src="../imgs/tumbnail_5.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_6"><img src="../imgs/tumbnail_6.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_7"><img src="../imgs/tumbnail_7.jpg" width="350" height="auto" alt="tumb"/></div>
<div class="tumb" id="tumb_8"><img src="../imgs/tumbnail_8.jpg" width="350" height="auto" alt="tumb"/></div>
</div>
<!---/TUMBNAIL CONTAINER ----->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment