我遇到以下情况,希望得到您的帮助。以下是完整示例的链接:https://jsfiddle.net/7kpfqLr6/25/
让我解释一下。我试图在加载更多按钮之前设置图像的数量。问题是,如您所见,第一个同位素项是文本项。所有其他项目都是图像。现在,当我将图像数量设置为 6 时,它会显示 6 个同位素项目(第一个文本项目 + 5 个图像)。是的,这是合乎逻辑的,我理解这一点。但我希望它在第一个项目之后显示 6 张图像。怎么做?我可以依靠你的帮助吗?
谢谢。
$(document).ready(function() {
// init Isotope
var $container = $('.isotope-items-wrap').isotope({
itemSelector: '.isotope-item',
transitionDuration: '0.5s',
masonry: {
columnWidth: '.grid-sizer'
}
});
//****************************
// Isotope Load more button
//****************************
var initShow = 6; //number of images loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $container.data('isotope'); // get Isotope instance
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$container.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
return item.element;
});
$(hiddenElems).addClass('hidden');
$container.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
}
else {
$("#load-more").show();
};
}
//append load more button
$container.after('<div class="margin-top-30 text-center"><button id="load-more" class="btn btn-primary margin-top-5"> Load More</button></div>');
//when load more button clicked
$("#load-more").click(function() {
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
});
最佳答案
您可以声明以下值:
var initShow = 7;
然后在初始加载后将其更改为 6。
$("#load-more").click(function() {
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
j$('#filters').data('clicked', false);
} else {
counter = counter;
};
initShow = 6;
counter = counter + initShow;
loadMore(counter);
});
如果您点击
加载更多按钮
,初始加载将显示6张图片
和额外的6张图片
。
希望对您有所帮助。
关于javascript - 显示同位素图像所需的建议加载更多功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41730669/