Centered Isotope masonry

Developer
Insprd
Size
2,243 Kb
Views
58,696
  1. Centered Isotope masonry Previews
  2. Centered Isotope masonry HTML Codes
  3. Centered Isotope masonry CSS Codes
  4. Centered Isotope masonry JS Codes

How do I make an centered isotope masonry?

What is a centered isotope masonry? How do you make a centered isotope masonry? This script and codes were developed by Insprd on 13 September 2022, Tuesday.

Centered Isotope masonry Previews
IQ Test

Centered Isotope masonry - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Centered Isotope masonry</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div class="item w1 h2"></div> <div class="item w1 h1"></div> <div class="item w1 h1"></div> <div class="item w2 h2"></div> <div class="item w1 h2"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://isotope.metafizzy.co/jquery.isotope.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Centered Isotope masonry - Script Codes CSS Codes

#container { padding: 5px; margin: 0 auto; border: 2px solid black;
}
.item { float: left; background: #CCC; margin: 5px; width: 50px; height: 50px;
}
.item.w2 { width: 110px; }
.item.h2 { height: 110px; }
/* no transition on .isotope container */
.isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity;
}

Centered Isotope masonry - Script Codes JS Codes

$(function(){ var $container = $('#container'), $body = $('body'), colW = 60, columns = null; $container.isotope({ // disable window resizing resizable: false, masonry: { columnWidth: colW } }); $(window).smartresize(function(){ // measure the width of all the items var itemTotalWidth = 0; $container.children().each(function(){ itemTotalWidth += $(this).outerWidth(true); }); // check if columns has changed var bodyColumns = Math.floor( ( $body.width() -10 ) / colW ), itemColumns = Math.floor( itemTotalWidth / colW ), currentColumns = Math.min( bodyColumns, itemColumns ); if ( currentColumns !== columns ) { // set new column count columns = currentColumns; // apply width to container manually, then trigger relayout $container.width( columns * colW ) .isotope('reLayout'); } }).smartresize(); // trigger resize to set container width
});
Centered Isotope masonry - Script Codes
Centered Isotope masonry - Script Codes
Home Page Home
Developer Insprd
Username insprd
Uploaded September 13, 2022
Rating 3
Size 2,243 Kb
Views 58,696
Do you need developer help for Centered Isotope masonry?

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!

Insprd (insprd) Script Codes
Name
Brick a link with CSS
Loading bars
Hover Animation from UNIQLO
Animated Link Underline
Aurora Effect
A Pen by insprd
Minimal Clock Card
Bolt action
Simple Spinning Logo Idea
Fading gradient button
Create amazing web content 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!