在容器内放置同位素加载更多按钮
Position Isotope Load More Button within Container
我正在尝试使用 Isotope 构建图像网格,其中 "Load More"-Button 位于该网格内,在所有元素之后。
放置按钮不是问题,插入新元素也不是问题,但是我完全不知道如何确保按钮始终位于元素之后。在我当前的代码中,如果单击 "Load More" 按钮并在按钮后插入更多元素。
知道我该如何改变它吗?这是我得到的一些远:http://goo.gl/JbXkzC
谢谢!
首先,如果您不想让按钮成为同位素布局的一部分,那么您的按钮就不能是同位素项,因此它会被合并到布局中。您可以使用同位素的 stamp option ,但最简单的方法是将其从 col-xs-12 中移出并移入 row-fluid 并稍微更改按钮 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;
}
看起来唯一的解决方案是删除 "Load More" 按钮并在添加新元素后重新添加它。
$('#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 );
});
完整代码here on CodePen.
我正在尝试使用 Isotope 构建图像网格,其中 "Load More"-Button 位于该网格内,在所有元素之后。
放置按钮不是问题,插入新元素也不是问题,但是我完全不知道如何确保按钮始终位于元素之后。在我当前的代码中,如果单击 "Load More" 按钮并在按钮后插入更多元素。
知道我该如何改变它吗?这是我得到的一些远:http://goo.gl/JbXkzC
谢谢!
首先,如果您不想让按钮成为同位素布局的一部分,那么您的按钮就不能是同位素项,因此它会被合并到布局中。您可以使用同位素的 stamp option ,但最简单的方法是将其从 col-xs-12 中移出并移入 row-fluid 并稍微更改按钮 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;
}
看起来唯一的解决方案是删除 "Load More" 按钮并在添加新元素后重新添加它。
$('#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 );
});
完整代码here on CodePen.