0
我在我的項目中使用了knockout.js和masonry.js。因此砌體文檔建議我使用reloaditems method將DOM的更改應用於砌體。 它工作正常，直到我添加一個懸停過渡效果我的項目。 這裏is the code。masonry.js - 對它們進行過渡效果的佈局項目
正如你可以看到按「加載更多！」按鈕石工似乎重新加載兩次！
一些調試後，我發現「transitionend」事件使masonry.js重新加載！
任何人都可以給我一個小費來解決這個問題嗎？
謝謝
var dataRand = [
"Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no",
"Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.",
"Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.Et qui modo soleat aperiri. Quo at probo labore integre, nam te modo iudicabit. Ea mutat inermis eos, ei usu soleat scripta repudiandae. Nec ea natum semper, cetero admodum eos eu. Placerat percipit reformidans an eam, vis in ridens ornatus efficiendi, elit labitur nam ne. Eum nonumy noster verear et, ex detracto electram eloquentiam mei."
];
function masonryExampleViewModel() {
var that = this;
this.results = ko.observableArray([]);
this.loadmore = function() {
for (var i = 0; i <= 5; i++) {
that.results.push(dataRand[Math.floor(Math.random() * 3)]);
}
$("#masonryContainer").masonry("reloadItems");
$("#masonryContainer").masonry("layout");
};
}
ko.applyBindings(new masonryExampleViewModel(), $("#masonryExampleWrapper")[0]);
$("#masonryContainer").masonry({
itemSelector: ".masonry-item",
columnWidth: ".grid-sizer",
percentPosition: true,
isOriginLeft: false,
gutter: ".gutter_sizer"
});.grid-sizer,
.masonry-item {
width: 32%;
margin-bottom: 2%;
padding: 10px;
}
.gutter_sizer {
width: 2%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.masonry-item {
border: 1px solid #DDD;
-webkit-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
-moz-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
-ms-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
-o-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
}
.masonry-item:hover {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
transform: translateY(-6px);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}
.loadmoreBtn {
display: block;
text-align: center;
padding: 10px;
background-color: rebeccapurple;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<div id="masonryExampleWrapper">
<div id="masonryContainer">
<div class="grid-sizer"></div>
<div class="gutter_sizer"></div>
<div class="masonry-item">
<span class="data-container">Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no</span>
</div>
<div class="masonry-item">
<span class="data-container">Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.</span>
</div>
<div class="masonry-item">
<span class="data-container">Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.Et qui modo soleat aperiri. Quo at probo labore integre, nam te modo iudicabit. Ea mutat inermis eos, ei usu soleat scripta repudiandae. Nec ea natum semper, cetero admodum eos eu. Placerat percipit reformidans an eam, vis in ridens ornatus efficiendi, elit labitur nam ne. Eum nonumy noster verear et, ex detracto electram eloquentiam mei.</span>
</div>
<!-- ko foreach : results -->
<div class="masonry-item">
<span class="data-container" data-bind="text : $data"></span>
</div>
<!-- /ko -->
</div>
<a href="#" class="loadmoreBtn" data-bind="click : loadmore">load more!</a>
</div>