我如何使用同位素布局加载图像 [英] How do i use imagesloaded with isotope layout

问题描述

我发现这个脚本工作正常，唯一的问题是元素重叠，因为我将动态图像放在其中。当我尝试使用imagesLoaded时，布局会中断。如何使用此脚本正确调用imagesLoaded？我无法弄明白。

i found this script that works fine, the only problem is the elements overlap because I'm placing dynamic images inside of them. When I try to use imagesLoaded the layout breaks. How do I correctly call imagesLoaded with this script? I cant quite figure it out.

<script>
(function ($) {
    var $container = $('.example'),
        colWidth = function () {
            var w = $container.width(), 
                columnNum = 1,
                columnWidth = 0;
            if (w > 1200) {
                columnNum  = 4;
            } else if (w > 900) {
                columnNum  = 4;
            } else if (w > 600) {
                columnNum  = 3;
            } else if (w > 300) {
                columnNum  = 2;
            }
            columnWidth = Math.floor(w/columnNum);
            $container.find('.item').each(function() {
                var $item = $(this),
                    multiplier_w = $item.attr('class').match(/item-w(\d)/),
                    multiplier_h = $item.attr('class').match(/item-h(\d)/),
                    width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                     height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
                $item.css({
                    width: width,
                     height: height
                });
            });
            return columnWidth;
        },
        isotope = function () {
            $container.isotope({
                resizable: false,
                itemSelector: '.item',
                masonry: {
                    columnWidth: colWidth(),
                    gutterWidth: 4
                }
            });
        };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));
</script>

我尝试过：



< script>

$（document）.ready（function（$）{

var $ container = $（'。例子'），

$ container.imagesLoaded（function（）{

colWidth = function（）{

var w = $ container.width （），

columnNum = 1，

columnWidth = 0;

if（w> 1200）{

columnNum = 4;

}否则if（w> 900）{

columnNum = 4;

}否则if（w>如果（w> 300）{

columnNum = 2;

}



columnWidth = Math.floor（w / columnNum）;

$ container.find（'。item'）。每个（function（）{

var $ item = $（this），

multiplier_w = $ item.attr（'class'）。match（/ item-w（\d）/），

multiplier_h = $ item.attr（'class'）。match（/ item-h（\d）/），

width = multiplier_w？ columnWidth * multiplier_w [1] -4：columnWidth-4，

height = multiplier_h？ columnWidth * multiplier_h [1] * 0.5-4：columnWidth * 0.5-4;

$ item.css（{

宽度：宽度，

身高：身高

}）;

}）;

返回columnWidth;

}，



isotope = imagesLoaded（function（）{

$ container.isotope（{

resizable：false，
itemSelector：'.item'，

砌筑：{

columnWidth：colWidth（），

gutterWidth：4

}

}）;

};



同位素（）;

$（窗口）.smartresize（同位素）;

}）;

}（jQuery））;



< / script>

What I have tried:

<script>
$(document).ready(function ($) {
var $container = $('.example'),
$container.imagesLoaded( function() {
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 1200) {
columnNum = 4;
} else if (w > 900) {
columnNum = 4;
} else if (w > 600) {
columnNum = 3;
} else if (w > 300) {
columnNum = 2;
}

columnWidth = Math.floor(w/columnNum);
$container.find('.item').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/item-w(\d)/),
multiplier_h = $item.attr('class').match(/item-h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},

isotope = imagesLoaded( function() {
$container.isotope({
resizable: false,
itemSelector: '.item',
masonry: {
columnWidth: colWidth(),
gutterWidth: 4
}
});
};

isotope();
$(window).smartresize(isotope);
});
}(jQuery));

</script>

推荐答案

）{
var

) { var

c ontainer =

container =

（'。example'），
colWidth = function（）{
var w =

('.example'), colWidth = function () { var w =

这篇关于我如何使用同位素布局加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！