在容器内放置同位素加载更多按钮

Position Isotope Load More Button within Container

本文关键字：加载 按钮 同位素      更新时间：2023-09-26

我正在尝试用同位素构建一个图像网格，其中"加载更多"按钮位于该网格内，在所有元素之后的末尾。

放置按钮不是问题，插入新元素也不是

问题，但是我严格不知道如何确保按钮始终停留在元素之后。在我当前的代码中，如果单击"加载更多"按钮并在按钮后插入更多元素。

知道我该如何改变这一点吗？在这里，我得到了一些远：http://goo.gl/JbXkzC

谢谢！

首先，如果您不希望按钮成为同位素布局的一部分，则按钮不能是同位素项目，因此将其合并到布局中。您可以使用同位素的标记选项，但最简单的方法是将其从 col-xs-12 中移出并放入行流体中，然后稍微更改按钮 css：

代码笔

.html：

<div class="container">
<div class="row">
<h1>Isotope Image Grid</h1>
<!--<button class="" id="button">Load More</button>-->
</div>
</div>
<div class="container-fluid">
 <div class="row-fluid">
 <div class="col-xs-12">
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>
  <div class="item">
    <img src="" alt="" />
  </div>     
</div><button id="button">Load More</button>
</div>
</div>

.css：

#button {
  display:inline-block;
 width: 25%;
 height: 180px;
 color: #fff;
 font-size: 18px;
 background-color: #C0392B;
 border: 0px;
 }

看起来唯一的解决方案是删除"加载更多"按钮，并在附加新元素后重新添加它。 

$('#portfolioGrid').on("click", ".loadMore", function(addIsotopeItems){
     addIsotopeItems.preventDefault();
     var OElem = document.getElementById("button");
     OElem.parentNode.removeChild(OElem);
     var di="<div class=''item item-new''><img src=''''></img></div><button class=''item loadMore'' id=''button''>Load More</button>";
     newItems = $(di).appendTo('#portfolioGrid');
     $("#portfolioGrid").isotope('insert', newItems );
});

完整的代码在CodePen上。

相关文章：