作者：宝宝2502932575 | 来源：互联网 | 2023-06-07 20:25
本文由编程笔记#小编为大家整理，主要介绍了html 这是我使用Masonry 3和Bootstrap 3的模板。对于那些遵循这个要点的人来说，自Bootstrap 2以来发生了很多变化。相关的知识，希
本文由编程笔记#小编为大家整理，主要介绍了html 这是我使用Masonry 3和Bootstrap 3的模板。对于那些遵循这个要点的人来说，自Bootstrap 2以来发生了很多变化。相关的知识，希望对你有一定的参考价值。
/* Default tags and Bootstrap classes */
body {
font-family: &＃39;PT Sans Caption&＃39;, sans-serif;
color: #000099;
padding: 40px 0;
}
.lead { padding: 40px 0; }
/* Grid */
#posts { margin: 30px auto 0; }
.post {
margin: 0 0 50px;
text-align: center;
width: 100%;
}
.post img { padding: 0 15px; width: 100%; }
#grid.container .post img { padding: 0; }
/* Medium devices */
@media (min-width: 768px) {
#grid > #posts .post { width: 335px; }
#grid > #posts .post.cs2 { width: 100%; }
.post img { padding: 0; }
}
/* Medium devices */
@media (min-width: 992px) {
#grid > #posts .post { width: 445px; }
#grid > #posts .post.cs2 { width: 100%; }
}
/* Large devices */
@media (min-width: 1200px) {
#grid > #posts .post { width: 346px; }
#grid > #posts .post.cs2 { width: 742px; }
}
/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I&＃39;m
being really picky about whitespace. If you don&＃39;t care, no problem, just delete this.
Can this be done with Masonry options? */
@media (min-width: 1300px) {
#grid {
left: -50px;
padding-left: 50px;
padding-right: 50px;
position: relative;
}
#grid.container {
left: auto;
padding-left: 15px;
padding-right: 15px;
}
}
// Load is used to ensure all images have been loaded, impossible with document
jQuery(window).load(function () {
// Takes the gutter width from the bottom margin of .post
var gutter = parseInt(jQuery(&＃39;.post&＃39;).css(&＃39;marginBottom&＃39;));
var cOntainer= jQuery(&＃39;#posts&＃39;);
// Creates an instance of Masonry on #posts
container.masonry({
gutter: gutter,
itemSelector: &＃39;.post&＃39;,
columnWidth: &＃39;.post&＃39;
});
// This code fires every time a user resizes the screen and only affects .post elements
// whose parent class isn&＃39;t .container. Triggers resize first so nothing looks weird.
jQuery(window).bind(&＃39;resize&＃39;, function () {
if (!jQuery(&＃39;#posts&＃39;).parent().hasClass(&＃39;container&＃39;)) {
// Resets all widths to &＃39;auto&＃39; to sterilize calculations
post_width = jQuery(&＃39;.post&＃39;).width() + gutter;
jQuery(&＃39;#posts, body > #grid&＃39;).css(&＃39;width&＃39;, &＃39;auto&＃39;);
// Calculates how many .post elements will actually fit per row. Could this code be cleaner?
posts_per_row = jQuery(&＃39;#posts&＃39;).innerWidth() / post_width;
floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
posts_width = (ceil_posts_width > jQuery(&＃39;#posts&＃39;).innerWidth()) ? floor_posts_width : ceil_posts_width;
if (posts_width == jQuery(&＃39;.post&＃39;).width()) {
posts_width = &＃39;100%&＃39;;
}
// Ensures that all top-level elements have equal width and stay centered
jQuery(&＃39;#posts, #grid&＃39;).css(&＃39;width&＃39;, posts_width);
jQuery(&＃39;#grid&＃39;).css({&＃39;margin&＃39;: &＃39;0 auto&＃39;});
}
}).trigger(&＃39;resize&＃39;);
});
Bootstrap 3 + Masonry 3
This is deployed with the #grid div fluid (that is, it has no Bootstrap .container class). To make it fixed simply add the .container class to it. Use the media queries in style.css to change the grid&＃39;s post widths and margins.
Title Goes Here Category 
Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category Title Goes Here Category
京公网安备 11010802041100号