Masonry

Developer
Uriuriuriu
Size
5,005 Kb
Views
8,096
  1. Masonry Previews
  2. Masonry HTML Codes
  3. Masonry CSS Codes
  4. Masonry JS Codes

How do I make an masonry?

Http://masonry.desandro.com/. What is a masonry? How do you make a masonry? This script and codes were developed by Uriuriuriu on 10 January 2023, Tuesday.

Masonry Previews
IQ Test

Masonry - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Masonry</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1> Masonry
</h1>
<div id="link"> <a href="https://masonry.desandro.com/">https://masonry.desandro.com/</a>
</div>
<div id="container"> <div class="grid-sizer"></div> <div class="item"> <div class="itemContent"> <h2> 1. </h2> <div> please! </div> </div> </div> <div class="item"> <div class="itemContent"> <h2> 2. </h2> <div> window! </div> </div> </div> <div class="item w2"> <div class="itemContent"> <h2> 3. </h2> <div> resize! </div> </div> </div> <div class="item"> <div class="itemContent"> <h2> 4. </h2> <div> oh!! </div> </div> </div> <div class="item w2"> <div class="itemContent"> <h2> 5. </h2> <div> YES!! </div> </div> </div> <div class="item"> <div class="itemContent"> <h2> 6. </h2> <div> ok! </div> </div> </div> <div class="item"> <div class="itemContent"> <h2> 7. </h2> <div> tA two-sport star in Iowa had her prep girls basketball season cut short by a horrific accident while participating in team photos in the locker room prior to a game. </div> </div> </div> <div class="item"> <div class="itemContent"> <h2> 8. </h2> <div> Mail </div> </div> </div> <div class="item"> <div class="itemContent"> <h2> 9. </h2> <div> News </div> </div> </div> <div class="item w2"> <div class="itemContent"> <h2> 10. </h2> <div> Sports </div> </div> </div>
</div>
<div id="menu"> <span id="menu_add">+</span><span id="menu_del">-</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/90712768/js/libs/masonry.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Masonry - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,300);
body { font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 100; padding: 10px; color: #d35400; background-color: #f1c40f; -moz-border-radius: 4px / 4px; -webkit-border-radius: 4px 4px; border-radius: 4px / 4px;
}
h1 { padding-top: 30px; font-size: 64px; font-weight: 300; text-align: center; line-height: 0.48em;
}
#link { text-align: center; margin-bottom: 30px;
}
a { font-size: 15px; color: #d35400; transition-duration: 0.4s;
}
a:hover { color: #6a6a6a;
}
h2 { font-weight: 300; font-size: 30px;
}
.item { -webkit-transform: translate3d(0, 0, 0); box-sizing: border-box; transition-property: background-color; transition-duration: 0.4s; transition-timing-function: ease-out; background-color: rgba(211, 84, 0, 0.08); -moz-border-radius: 4px / 4px; -webkit-border-radius: 4px 4px; border-radius: 4px / 4px;
}
.item:hover { background-color: rgba(211, 84, 0, 0.16); -moz-transform: scale(1.02, 1.02); -ms-transform: scale(1.02, 1.02); -webkit-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02);
}
.itemContent { padding: 10px;
}
/* for mobile */
.item,
.item.w2,
.grid-sizer { width: 100%; margin: 0 1% 8px 0;
}
#container { margin-left: 0;
}
/* full screens */
@media screen and (min-width: 720px) { .item, .grid-sizer { width: 23.75%; } .item.w2 { width: 48.5%; } #container { margin-left: 2%; }
}
#menu { position: fixed; top: 10px; right: 10px; font-size: 30px;
}
#menu_add,
#menu_del { display: inline-block; text-align: center; vertical-align: middle; color: #f1c40f; background-color: #d35400; width: 34px; height: 34px; margin-left: 5px; -moz-border-radius: 4px / 4px; -webkit-border-radius: 4px 4px; border-radius: 4px / 4px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
#menu_add:hover,
#menu_del:hover { cursor: pointer; background-color: rgba(211, 84, 0, 0.6); z-index: 100;
}
#menu_add { line-height: 1.1em;
}
#menu_del { line-height: 0.8em; font-size: 40px;
}
#menu_add:not(:active),
#menu_del:not(:active) { transition: background-color 150ms ease-in;
}
#menu_add:active,
#menu_del:active { -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); background-color: rgba(255, 255, 255, 0.6);
}

Masonry - Script Codes JS Codes

jQuery.extend(jQuery.easing,
{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; },
});
$(function() {
// masonry
var $container = $('#container');
// initialize
$container.masonry({ itemSelector: '.item', columnWidth: '.grid-sizer', isAnimated: true, animationOptions: { duration : 30000, easing: 'easeInQuart' }
});
// gutter: 12 // %指定できないので使わない方がいい
//var msnry = $container.data('masonry');
// create <div class="item">..</div>
function getItemElement() { var elem = document.createElement('div'); var widthClass = Math.random() > 0.7 ? 'w2' : ''; elem.className = 'item ' + widthClass; elem.innerHTML = "<div class='itemContent'><h2>XX.</h2><div>addElement</div></div>"; return elem;
}
// button
$("#menu_add").click(function(){ var fragment = document.createDocumentFragment(); var elem = getItemElement(); fragment.appendChild( elem ); container.appendChild( fragment ); $container.masonry('appended', elem ).fadeIn();
// msnry.layout();
});
$("#menu_del").click(function(){ $container.masonry('remove', $(".item:last-child")[0] ); msnry.layout();
});
});
Masonry - Script Codes
Masonry - Script Codes
Home Page Home
Developer Uriuriuriu
Username uriuriuriu
Uploaded January 10, 2023
Rating 3.5
Size 5,005 Kb
Views 8,096
Do you need developer help for 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!

Uriuriuriu (uriuriuriu) Script Codes
Name
Canvas circle gauge
SANGETUKI separator
Css background animation
Simple genetic algorithm
TV effect
Glitch Video
Three.js ver.1 rotate camera
Three.js ver.2 animation
Glitch test
Glitchicken
Create amazing blog posts 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!