当masonary也集成时，如何使用现有或isotope设计。
我想要使用的设计是有一个 Masonary ，级联网格布局库，即使它包含不同的文本，但我需要添加同位素，过滤器＆amp;排序神奇的布局，轻松过滤所需的输出。
当我删除id="posts"时，我得到了我想要的设计，但过滤功能不正常。当我添加id="posts"时，过滤功能正常，但设计是完整行。
期望的设计发生但同位素不起作用：
$(document).ready(function() {
$(".navigation").load("ajax/navigation2.php");
$(".footer").load("ajax/footer.html");
/* activate jquery isotope */
var $container = $('#posts').isotope({
itemSelector: '.item'
});
$(window).smartresize(function() {
$container.isotope({
columnWidth: '.col-sm-3'
});
});
$container.isotope({ filter: '*' });
// filter items on button click
$('#filters').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
});@import url('https://fonts.googleapis.com/css?family=Lato|Quicksand');
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Quicksand', sans-serif;
font-weight: normal;
}
.masonry {
display: block;
-webkit-column-gap: 2.25rem;
-moz-column-gap: 2.25rem;
column-gap: 12.25rem;
}
.masonry.masonry-columns-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
@media(max-width: 1170px) {
.masonry.masonry-columns-5 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
.masonry.masonry-columns-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.masonry.masonry-columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.masonry.masonry-columns-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.masonry.masonry-columns-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
@media(max-width: 991px) {
.masonry.masonry-columns-4,
.masonry.masonry-columns-5 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media(max-width: 767px) {
.masonry.masonry-columns-4,
.masonry.masonry-columns-5,
.masonry.masonry-columns-3 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media(max-width: 540px) {
.masonry.masonry-columns-4,
.masonry.masonry-columns-5,
.masonry.masonry-columns-3,
.masonry.masonry-columns-2 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
.masonry .masonry-item {
display: inline-block !important;
width: 100% !important;
max-width: 100% !important;
position: relative;
display: block;
padding: 3px;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: .25rem;
float: none !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-bottom: 2.25rem !important;
}
.masonry .masonry-item {
display: inline-block;
margin-bottom: 20px;
width: 100%;
padding: 10px;
border: 1px solid transparent;
transition: all 0.4s ease-in-out;
}
.masonry .masonry-item:hover {
border: 1px solid #f0f0f0;
}
.masonry .masonry-item .post-title {
font-size: 20px;
}
.masonry .masonry-item .post-info {
color: #999;
text-transform: uppercase;
}
.masonry .masonry-item p {
color: #666;
}
.masonry .masonry-item .read-more {
color: #27c2aa;
}
.masonry .masonry-item .tag-comment {
border-top: 1px solid #f0f0f0;
margin-top: 10px;
padding: 5px 0;
color: #999;
}
/* Isotope Transitions
------------------------------- */
.isotope,
.isotope .item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/1.5.25/jquery.isotope.min.js"></script>
<div class="container" style="margin-top:15px; margin-bottom: 15px;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ol class="breadcrumb" style="background-color: transparent;">
<li><a href="javascript:void(0);" onclick="window.location='#'">Home</a></li>
<li class="active">Ask</li>
</ol>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Ask</h1>
</div>
<div id="filters" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 button-group">
<button class="btn btn-primary btn-lg" data-filter="*">ALL FAQ</button>
<button class="btn btn-primary btn-lg" data-filter=".web">WEB</button>
<button class="btn btn-primary btn-lg" data-filter=".design">DESIGN</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3>Find answers to some of our most frequently asked questions</h3>
<hr width="50%">
</div>
<!-- Masonary Content FAQ-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="masonry masonry-columns-3">
<div class="masonry-item web item">
<div class="media">
<img src="http://placehold.it/350x150" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Getting Bootstrap Tabs to Play Nice with Masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>This is my template for using Masonry 3 with Bootusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrstrap, Desandro Masonry & Twitter Bootstrap 3. How to use responsive twitter bootstrap & masonry together</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item design item">
<div class="media">
<img src="http://placehold.it/450x250" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Bootstrap Masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item design item">
<div class="media">
<img src="http://placehold.it/550x150" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Masonry CSS with Bootstrap</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Bootstrap Masonry example snippets with CSS, Javascript and HTML. ... Example of using CSS only for masonry / isotope style layout with Bootstrap panels.</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div id="1" class="masonry-item design item">
<!-- No Media -->
<h2 class="post-title">Masonry with Bootstrap 3</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>In conclusion remember that Masonry was born and remains a JavaScript grid layout library, so even if you can make it work with CSS</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div id="2" class="masonry-item web item">
<div class="media">
<img src="http://placehold.it/450x350" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">How to create the masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Getting twitter bootstrap's responsive layout and masonry to play alongside each other is pretty simple.</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item web item">
<!-- No Media -->
<h2 class="post-title">Masonry & Twitter Bootstrap 3</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>For this post I created an example of minimalistic layout for a blog/portfolio using both Bootstrap and Masonry. Why it should be useful?</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
</div>
</div>
</div>
</div>
期望的设计没有发生但是同位素功能
$(document).ready(function() {
$(".navigation").load("ajax/navigation2.php");
$(".footer").load("ajax/footer.html");
var $container = $('#posts').isotope({
itemSelector: '.item'
});
$(window).smartresize(function() {
$container.isotope({
columnWidth: '.col-sm-3'
});
});
$container.isotope({ filter: '*' });
$('#filters').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
});@import url('https://fonts.googleapis.com/css?family=Lato|Quicksand');
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Quicksand', sans-serif;
font-weight: normal;
}
.masonry {
display: block;
-webkit-column-gap: 2.25rem;
-moz-column-gap: 2.25rem;
column-gap: 12.25rem;
}
.masonry.masonry-columns-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
@media(max-width: 1170px) {
.masonry.masonry-columns-5 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
.masonry.masonry-columns-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.masonry.masonry-columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.masonry.masonry-columns-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.masonry.masonry-columns-1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
@media(max-width: 991px) {
.masonry.masonry-columns-4,
.masonry.masonry-columns-5 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
@media(max-width: 767px) {
.masonry.masonry-columns-4,
.masonry.masonry-columns-5,
.masonry.masonry-columns-3 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media(max-width: 540px) {
.masonry.masonry-columns-4,
.masonry.masonry-columns-5,
.masonry.masonry-columns-3,
.masonry.masonry-columns-2 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
.masonry .masonry-item {
display: inline-block !important;
width: 100% !important;
max-width: 100% !important;
position: relative;
display: block;
padding: 3px;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: .25rem;
float: none !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-bottom: 2.25rem !important;
}
.masonry .masonry-item {
display: inline-block;
margin-bottom: 20px;
width: 100%;
padding: 10px;
border: 1px solid transparent;
transition: all 0.4s ease-in-out;
}
.masonry .masonry-item:hover {
border: 1px solid #f0f0f0;
}
.masonry .masonry-item .post-title {
font-size: 20px;
}
.masonry .masonry-item .post-info {
color: #999;
text-transform: uppercase;
}
.masonry .masonry-item p {
color: #666;
}
.masonry .masonry-item .read-more {
color: #27c2aa;
}
.masonry .masonry-item .tag-comment {
border-top: 1px solid #f0f0f0;
margin-top: 10px;
padding: 5px 0;
color: #999;
}
/* Isotope Transitions
------------------------------- */
.isotope,
.isotope .item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
<!--jquery-1.12.3-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!--Bootstrap 3.3.7-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Isotopes-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/1.5.25/jquery.isotope.min.js"></script>
<div class="container" style="margin-top:15px; margin-bottom: 15px;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ol class="breadcrumb" style="background-color: transparent;">
<li><a href="javascript:void(0);" onclick="window.location='#'">Home</a></li>
<li class="active">Ask</li>
</ol>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Ask</h1>
</div>
<div id="filters" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 button-group">
<button class="btn btn-primary btn-lg" data-filter="*">ALL FAQ</button>
<button class="btn btn-primary btn-lg" data-filter=".web">WEB</button>
<button class="btn btn-primary btn-lg" data-filter=".design">DESIGN</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h3>Find answers to some of our most frequently asked questions</h3>
<hr width="50%">
</div>
<!-- Masonary Content FAQ-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="masonry masonry-columns-3" id="posts">
<div class="masonry-item web item">
<div class="media">
<img src="http://placehold.it/350x150" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Getting Bootstrap Tabs to Play Nice with Masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>This is my template for using Masonry 3 with Bootusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrstrap, Desandro Masonry & Twitter Bootstrap 3. How to use responsive twitter bootstrap & masonry together</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item design item">
<div class="media">
<img src="http://placehold.it/450x250" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Bootstrap Masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item design item">
<div class="media">
<img src="http://placehold.it/550x150" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Masonry CSS with Bootstrap</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Bootstrap Masonry example snippets with CSS, Javascript and HTML. ... Example of using CSS only for masonry / isotope style layout with Bootstrap panels.</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item web item">
<div class="media">
<img src="http://placehold.it/450x250" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Build a Dynamic Grid with Bootstrap</h2>
<h6 class="post-info">October-8 2015 : Pusing Masonry 3 with Bootstrap, Desandrosted by Admin</h6>
<p>Bootstrap snippet Example of usingusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandr CSS only for masonry / isotope style layout with Bootstrap panels.</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div id="2" class="masonry-item web item">
<div class="media">
<img src="http://placehold.it/450x350" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">How to create the masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Getting twitter bootstrap's responsive layout and masonry to play alongside each other is pretty simple.</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item web item">
<!-- No Media -->
<h2 class="post-title">Masonry & Twitter Bootstrap 3</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>For this post I created an example of minimalistic layout for a blog/portfolio using both Bootstrap and Masonry. Why it should be useful?</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
</div>
</div>
</div>
</div>