我正在尝试使用 Filterizr （像同位素一样的jQuery插件）来使用 LazySizes （'SEO友好的懒惰加载器用于图像'）。据我所知，在LazySizes初始化之后，图像被加载到DOM中，因此图像高度错误并且它们彼此重叠。我想保持图像响应我不能给他们一个固定的高度，因为在不同的浏览器宽度，然后他们再次开始重叠，这将意味着有大量的媒体查询不同的宽度（它变得非常混乱）。所以我需要一些方法，其中Filterizr可以在图像后加载或以某种方式获得正确的高度？
我在这里有一个CodePen演示http://codepen.io/heavymessing/pen/dWvNaM
HTML：
<div class="row" style="width:300px;float:left;">
<ul class="simplefilter">
<li class="active" data-filter="all">All</li>
<li data-filter="1">Cityscape</li>
<li data-filter="2">Landscape</li>
<li data-filter="3">Industrial</li>
<li data-filter="4">Daylight</li>
<li data-filter="5">Nightscape</li>
</ul>
</div>
<div class="row" style="width:100%; display: block; float: left;">
<div class="filtr-container">
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="Busy streets">
<img data-src="http://pipsum.com/400x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Busy Streets</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 5" data-sort="Luminous night">
<img data-src="http://pipsum.com/410x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Luminous night</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 4" data-sort="City wonders">
<img data-src="http://pipsum.com/420x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city wonders</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="In production">
<img data-src="http://pipsum.com/430x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">in production</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3, 4" data-sort="Industrial site">
<img data-src="http://pipsum.com/440x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">industrial site</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Peaceful lake">
<img data-src="http://pipsum.com/450x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">peaceful lake</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="City lights">
<img data-src="http://pipsum.com/460x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city lights</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Dreamhouse">
<img data-src="http://pipsum.com/470x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">dreamhouse</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="Restless machines">
<img data-src="http://pipsum.com/480x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">restless machines</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="Busy streets">
<img data-src="http://pipsum.com/490x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Busy Streets</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 5" data-sort="Luminous night">
<img data-src="http://pipsum.com/500x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Luminous night</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 4" data-sort="City wonders">
<img data-src="http://pipsum.com/510x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city wonders</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="In production">
<img data-src="http://pipsum.com/520x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">in production</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3, 4" data-sort="Industrial site">
<img data-src="http://pipsum.com/530x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">industrial site</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Peaceful lake">
<img data-src="http://pipsum.com/540x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">peaceful lake</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="City lights">
<img data-src="http://pipsum.com/550x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city lights</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Dreamhouse">
<img data-src="http://pipsum.com/560x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">dreamhouse</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="Restless machines">
<img data-src="http://pipsum.com/570x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">restless machines</span>
</div><div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="Busy streets">
<img data-src="http://pipsum.com/580x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Busy Streets</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 5" data-sort="Luminous night">
<img data-src="http://pipsum.com/590x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Luminous night</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 4" data-sort="City wonders">
<img data-src="http://pipsum.com/600x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city wonders</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="In production">
<img data-src="http://pipsum.com/610x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">in production</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3, 4" data-sort="Industrial site">
<img data-src="http://pipsum.com/620x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">industrial site</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Peaceful lake">
<img data-src="http://pipsum.com/630x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">peaceful lake</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="City lights">
<img data-src="http://pipsum.com/640x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city lights</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Dreamhouse">
<img data-src="http://pipsum.com/650x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">dreamhouse</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="Restless machines">
<img data-src="http://pipsum.com/660x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">restless machines</span>
</div><div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="Busy streets">
<img data-src="http://pipsum.com/670x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Busy Streets</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 5" data-sort="Luminous night">
<img data-src="http://pipsum.com/680x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Luminous night</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 4" data-sort="City wonders">
<img data-src="http://pipsum.com/690x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city wonders</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="In production">
<img data-src="http://pipsum.com/700x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">in production</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3, 4" data-sort="Industrial site">
<img data-src="http://pipsum.com/710x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">industrial site</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Peaceful lake">
<img data-src="http://pipsum.com/720x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">peaceful lake</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="City lights">
<img data-src="http://pipsum.com/730x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city lights</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 4" data-sort="Dreamhouse">
<img data-src="http://pipsum.com/740x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">dreamhouse</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="Restless machines">
<img data-src="http://pipsum.com/750x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">restless machines</span>
</div><div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 5" data-sort="Busy streets">
<img data-src="http://pipsum.com/760x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Busy Streets</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="2, 5" data-sort="Luminous night">
<img data-src="http://pipsum.com/770x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">Luminous night</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="1, 4" data-sort="City wonders">
<img data-src="http://pipsum.com/780x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">city wonders</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3" data-sort="In production">
<img data-src="http://pipsum.com/790x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">in production</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item lazyload" data-expand="-20" data-category="3, 4" data-sort="Industrial site">
<img data-src="http://pipsum.com/800x400.jpg" class="img-responsive lazyload" alt="sample image">
<span class="item-desc">industrial site</span>
</div>
</div>
</div>
</div>
CSS：
body {
margin-top: 1rem;
}
.filtr-item {
padding: 1rem;
}
.item-desc {
background-color: rgba(0,0,0,0.5);
color: white;
position: absolute;
text-transform: uppercase;
text-align: center;
padding: 1rem;
z-index: 1;
bottom: 1rem;
left: 1rem;
right: 1rem;
}
/* Filter controls */
.simplefilter {
dispaly: block;
float: left;
width: 100%;
}
.simplefilter li, .multifilter li, .sortandshuffle li {
color: white;
cursor: pointer;
display: block;
text-transform: uppercase;
padding: 1rem 2rem;
}
.simplefilter li {
background-color: #585858;
}
.simplefilter li.active {
background-color: #212121;
}
.multifilter li {
background-color: #4b9eff;
}
.multifilter li.active {
background-color: #2265b4;
}
/* Shuffle and sort controls */
select {
padding: 1rem 1rem;
text-transform: uppercase;
}
.sortandshuffle .shuffle-btn {
background-color: #dec800;
}
.sortandshuffle .sort-btn {
background-color: #de0000;
}
.sortandshuffle .sort-btn.active {
background-color: #9d0000;
}
/* Search control */
.search-row {
margin-left: 2.5rem;
}
.filtr-search {
padding: 0.5rem;
text-transform: uppercase;
}
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
jQuery的：
$(function() {
$(".filtr-container").imagesLoaded(function() {
//images loaded plugin
var filterizd = jQuery(".filtr-container").filterizr({
animationDuration: 0.5, //in seconds
delay: 150,
delayMode: "progressive",
easing: "ease-out",
filter: "all",
filterOutCss: {
//Filtering out animation
transform: "scale(0.5)"
},
filterInCss: {
//Filtering in animation
transform: "scale(1)"
},
layout: "sameWidth",
selector: ".filtr-container",
setupControls: true
});
});
});
：
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.expand = 0;
</script>
我也在使用ImagesLoaded插件，但似乎什么都没有？ （我也知道笔中的图像是不同的高度，但即使它们相同，我仍然得到相同的结果）。
谢谢，