Отзывчивый изотоп (масонство) + imagesLoaded + LazyLoad
Как и у многих пользователей, я сталкивался с общей проблемой перекрытия при использовании изотопа. Я попытался интегрировать imagesLoaded, и это работало до некоторой степени, но, поскольку я хочу отобразить более 100 фотографий, неэффективно ждать загрузки всех фотографий, прежде чем выложить изотоп. Кроме того, все 100 изображений загружаются в один столбец, прежде чем изотоп включается. Я пытался добавить LazyLoad в уравнение, но безрезультатно. После бесконечных исследований и чтения я пришел к выводу, что то, чего я хотел достичь, было невозможно, пока я не наткнулся на этот сайт:
http://www.erikjohanssonphoto.com/
Это именно то, чего я стремился достичь. Как видите, все изображения загружаются в правильном положении независимо от того, какие изображения загружаются первыми. После загрузки изображений ретрансляция отсутствует, но она прогрессивна, когда вы прокручиваете больше изображений. Самое главное, что настройка отзывчива. Элементы сетки масштабируются соответственно при изменении размера окна и изменении количества столбцов с каждым установленным приращением.
Любая помощь или совет в достижении этого будет принята с благодарностью!
HTML
<body>
<div id="container" class="fluid">
<div class="item">
<img src="images/1.jpg" data-original="images/1.jpg"></div>
<div class="item">
<img src="images/2.jpg" data-original="images/2.jpg"></div>
<div class="item">
<img src="images/3.jpg" data-original="images/3.jpg"></div>
<div class="item">
<img src="images/4.jpg" data-original="images/4.jpg"></div>
<div class="item">
<img src="images/5.jpg" data-original="images/5.jpg"></div>
<div class="item">
<img src="images/6.jpg" data-original="images/6.jpg"></div>
<div></div>
</body>
CSS
.container, .header {
margin: auto;
text-align: center;}
#container.fluid .item {
width: 25%; }
#container.fluid .item img {
display: block;
width: 100%;}
JS
$(window).load(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.isotope({
itemSelector: '.item',
});
$('.item img').addClass('not-loaded');
$('.item img.not-loaded').lazyload({
effect: 'fadeIn',
load: function() {
// Disable trigger on this image
$(this).removeClass("not-loaded");
$container.isotope('reload');
}
});
$('.item img.not-loaded').trigger('scroll');
});
});