Icon Grid

Developer
Michael Chernin
Size
3,040 Kb
Views
6,072
  1. Icon Grid Previews
  2. Icon Grid HTML Codes
  3. Icon Grid CSS Codes
  4. Icon Grid JS Codes

How do I make an icon grid?

What is a icon grid? How do you make a icon grid? This script and codes were developed by Michael Chernin on 19 January 2023, Thursday.

Icon Grid Previews
IQ Test

Icon Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon Grid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title></title>	<link rel="stylesheet" type="text/css" href="css/styles.css" /> <link href='https://fonts.googleapis.com/css?family=Cambo' rel='stylesheet' type='text/css'>	<script src="https://code.jquery.com/jquery-latest.js"></script>	<script src="js/script.js"></script>	<!--[if IE]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body onload="setupBlocks();">	<div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p> </div> <div class="block"> <img src="http://helpgmaillogin.com/wp-content/uploads/2015/01/Communication-gmail-icon-11.png" alt="" width="40" /> <p><a href="http://gmail.com">Gmail</a></p>
<p>lorem5</p> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Icon Grid - Script Codes CSS Codes

/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {	display: block;
}
body {	line-height: 1;
}
ol, ul {	list-style: none;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
* {	-webkit-transition: all 1s ease-in-out;	transition: all 1s ease-in-out;	box-sizing: border-box;
}
html, body {	height: 100%;	min-height: 100%;
}
body {	font-family: "Cambo", serif;	font-size: 13px;	line-height: 18px;	background-color: #F6F6F6;
}
.block {	position: absolute;	/*background: #fff;	padding: 20px;	border: 1px solid #ddd;*/ padding: 3px;
}
p { text-align: center;
}

Icon Grid - Script Codes JS Codes

var colCount = 0;
var colWidth = 0;
var margin = 20;
var windowWidth = 0;
var blocks = [];
$(function(){	$(window).resize(setupBlocks);
});
function setupBlocks() {	windowWidth = $(window).width();	colWidth = $('.block').outerWidth();	blocks = [];	console.log(blocks);	colCount = Math.floor(windowWidth/(colWidth+margin*2));	for(var i=0;i<colCount;i++){	blocks.push(margin);	}	positionBlocks();
}
function positionBlocks() {	$('.block').each(function(){	var min = Array.min(blocks);	var index = $.inArray(min, blocks);	var leftPos = margin+(index*(colWidth+margin));	$(this).css({	'left':leftPos+'px',	'top':min+'px'	});	blocks[index] = min+$(this).outerHeight()+margin;	});
}
// Function to get the Min value in Array
Array.min = function(array) { return Math.min.apply(Math, array);
};
Icon Grid - Script Codes
Icon Grid - Script Codes
Home Page Home
Developer Michael Chernin
Username mchernin34
Uploaded January 19, 2023
Rating 3
Size 3,040 Kb
Views 6,072
Do you need developer help for Icon Grid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael Chernin (mchernin34) Script Codes
Name
Starter Portfolio
Image grid with captions
A Pen by Michael Chernin
Slide Out Menu
Card Flipping Effect
Popover Navigation
Column Drop
Pure CSS Speech Bubbles
Teachers Apps
Change background color based on mouse location
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!