Javascript 建议在“加载更多功能”中显示图像

Javascript 建议在“加载更多功能”中显示图像,javascript,jquery,image,jquery-isotope,Javascript,Jquery,Image,Jquery Isotope,我有以下情况,希望你能帮助我。以下是指向完整示例的链接: 让我解释一下。我试图在“加载更多”按钮之前设置图像的数量。问题是,正如您所看到的,第一个同位素项目是一个文本项目。所有其他项目都是图像。现在,当我将图像的数量设置为6时,它将显示6个同位素项目第一个文本项目+5个图像。是的,这是合乎逻辑的,我理解这一点。但我希望它在第一项之后显示6幅图像。怎么做?我能指望你的帮助吗 多谢各位 $(document).ready(function() { // init Isotope var $

我有以下情况,希望你能帮助我。以下是指向完整示例的链接:

让我解释一下。我试图在“加载更多”按钮之前设置图像的数量。问题是,正如您所看到的,第一个同位素项目是一个文本项目。所有其他项目都是图像。现在,当我将图像的数量设置为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个图像


我希望这能有所帮助。

谢谢你的回答,但这并不是我想要实现的目标。让我解释清楚。用户可以选择更改“加载更多”按钮之前显示的图像数量。例如,如果用户决定显示6个图像,他只输入一个数字->6。目前,它显示5个图像+文本项=6个项。这不是我想要的。我想要6个图片+文字项目。对不起,我没有一个母语为英语的人,这对我来说有点难以解释。