html 这是我使用Masonry 3和Bootstrap 3的模板。对于那些遵循这个要点的人来说，自Bootstrap 2以来发生了很多变化。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 这是我使用Masonry 3和Bootstrap 3的模板。对于那些遵循这个要点的人来说，自Bootstrap 2以来发生了很多变化。相关的知识，希望对你有一定的参考价值。
/* Default tags and Bootstrap classes */
body {
font-family: 'PT Sans Caption', 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'm
being really picky about whitespace. If you don'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('.post').css('marginBottom'));
var container = jQuery('#posts');
// Creates an instance of Masonry on #posts
container.masonry({
gutter: gutter,
itemSelector: '.post',
columnWidth: '.post'
});
// This code fires every time a user resizes the screen and only affects .post elements
// whose parent class isn't .container. Triggers resize first so nothing looks weird.
jQuery(window).bind('resize', function () {
if (!jQuery('#posts').parent().hasClass('container')) {
// Resets all widths to 'auto' to sterilize calculations
post_width = jQuery('.post').width() + gutter;
jQuery('#posts, body > #grid').css('width', 'auto');
// Calculates how many .post elements will actually fit per row. Could this code be cleaner?
posts_per_row = jQuery('#posts').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('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
if (posts_width == jQuery('.post').width()) {
posts_width = '100%';
}
// Ensures that all top-level elements have equal width and stay centered
jQuery('#posts, #grid').css('width', posts_width);
jQuery('#grid').css({'margin': '0 auto'});
}
}).trigger('resize');
});<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Masonry Template</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Header -->
<header id="header" class="container">
<h1>Bootstrap 3 + Masonry 3</h1>
<p class="lead">
This is deployed with the <code>#grid</code> div fluid (that is, it has no Bootstrap <code>.container</code> class). To make it fixed simply add the <code>.container</code> class to it. Use the media queries in <strong>style.css</strong> to change the grid's post widths and margins.
</p>
<hr>
</header>
<!-- Posts -->
<!-- <div id="grid" class="container"> -->
<div id="grid">
<div id="posts">
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post cs2">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="container">
<hr>
<p>Thanks for watching!</p>
</footer>
</body>
</html>以上是关于html 这是我使用Masonry 3和Bootstrap 3的模板。对于那些遵循这个要点的人来说，自Bootstrap 2以来发生了很多变化。的主要内容，如果未能解决你的问题，请参考以下文章