I am trying to reload my masonry each time I add item to my with an ajax query. However, it seems the recalculation of the masonry (I mean the display of each bloc) is never finished.
Each video bloc is hovering each other after load once I reexecute manually
$grid = $('#masonry').masonry({
itemSelector: ".video-box",
percentPosition: true,
});
Does anyone see the reason why in my code ?
Ajax function called (load() is called each time the bottom of the page is crossed and at the first page load)
function load(recherche, start=0, limit=20, handlerEndPage) {
console.log(start)
console.log(limit)
//$(document).bind("scroll", handlerEndPage);
$("#loader_active").show()
let form_data = new FormData();
form_data.append('recherche', recherche);
form_data.append('start', start);
form_data.append('limit', limit);
$.ajax({
url: "http://siteurl.com/ajax/videos.php",
contentType: false,
dataType: "json",
processData: false,
cache: false,
data: form_data,
type: 'POST',
success: function (data) {
if (data.length != 0){
$grid = $('#masonry').masonry({
itemSelector: ".video-box",
percentPosition: true,
});
$(data).each(function(index, value) {
if (value.id_video != null){
$item = $(showVideo(value, false));
$grid.append($item).masonry('appended', $item);
}
})
console.log("bind")
setTimeout(function(){
$(document).unbind("scroll", handlerEndPage);
$(document).bind("scroll", handlerEndPage);
}, 300);
// Scroll top items
const scrollButtons = document.querySelectorAll(".scroll-btn"),
searchesWrapper = document.querySelector(".searches-wrapper");
var amount = 0;
scrollButtons.forEach((btn, i) => btn.addEventListener("click", () => {
let direction = i > 0 ? "-" : "+";
amount = eval(`${amount} ${direction} ${searchesWrapper.offsetWidth}`);
searchesWrapper.style.setProperty("--scroll", amount + "px");
if (amount >= 0) {
scrollButtons[0].disabled = true;
} else {
scrollButtons[0].disabled = false;
}
if (Math.abs(amount - searchesWrapper.offsetWidth) >= searchesWrapper.scrollWidth) {
scrollButtons[1].disabled = true;
} else {
scrollButtons[1].disabled = false;
}
}));
// Videos
// Masonry Layout
//$('#masonry').masonry('reloadItems')
//$('#masonry').masonry({
// itemSelector: ".video-box",
// percentPosition: true,
//});
}
else {
console.log("Aucune video restante.")
console.log("unbind")
$(document).unbind("scroll", handlerEndPage);
}
$("#loader_active").hide()
// Evénement : Aucune vidéo retournée
if ($(".bgVideo").length == 0){
console.log("Aucun resultat trouvé")
$("#aucun_resultat").show()
}
else {
console.log("Des résultats ont été trouvés")
$("#aucun_resultat").hide()
}
$grid = $('#masonry').masonry({
itemSelector: ".video-box",
percentPosition: true,
});
}
})
}
Page before ajax call
<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Tok Tok</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<link href="http://siteurl.com/css/style.css" rel="stylesheet" />
<link href="http://siteurl.com/css/style-toktok.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="shortcut icon" href="http://siteurl.com/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="http://siteurl.com/image/grey_grenouille.png" />
<link rel="icon" href="http://siteurl.com/favicon.ico" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/566683bca0.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
</head>
<script src="http://siteurl.com/js/showVideo.js"></script>
<script src="http://siteurl.com/js/load.js"></script>
<body>
<header>
<div class="wrapper">
<form class="search-box">
<input type="search" name="search" id="search" placeholder="Rechercher ..." />
<button id="search-btn">
<span id="clear" onclick='$("#search").val("");' class="material-icons">search</span>
</button>
</form>
<button type="button" id="upload-btn">
<span class="material-icons">video_call</span>
<span>Upload</span>
</button>
<button type="button" id="sign-in-btn">
<span class="material-icons">account_circle</span>
<span>Sign in</span>
</button>
<nav id="menu" aria-hidden="true">
<div class="list">
<p class="list-title">List 1</p>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div class="list">
<p class="list-title">List 2</p>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div class="list">
<p class="list-title">List 3</p>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div class="list">
<p class="list-title">List 4</p>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</nav>
<button type="button" id="menu-btn">
<span class="material-icons">menu</span>
<span class="material-icons">close</span>
</button>
</div>
</header>
<section id="searches">
<div class="wrapper">
<div class="searches-top">
<h1 class="section-title">Trending Searches</h1>
<div class="scroll-buttons">
<button type="button" class="scroll-btn" disabled>
<span class="material-icons">chevron_left</span>
</button>
<button type="button" class="scroll-btn">
<span class="material-icons">chevron_right</span>
</button>
</div>
</div>
<div class="searches-container">
<div class="searches-wrapper">
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/511.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/510.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/505.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/506.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/507.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/508.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/492.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/493.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/494.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/495.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/496.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/497.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/498.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
<a href="#" class="search-box">
<video src="http://siteurl.com/videos/499.mp4" preload="metadata"></video>
<p class="search-title">Search tag</p>
</a>
</div>
</div>
</div>
</section>
<section id="trending">
<div class="wrapper">
<h1 class="section-title">Dernières vidéos</h1>
<div id="masonry" class="trending-container"></div>
</div>
</section>
</body>
<script src="http://siteurl.com/js/script.js"></script>
<script>
let start = 0;
let limit = 30;
// Gestion infinite scroll
var handlerEndPage = function () {
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 || (agentID && $(window).scrollTop() + $(window).height() + 200 > $(document).height())) {
load($("#search").val(), start, limit, handlerEndPage);
start += limit;
console.log("Fin de page détectée -> Chargement enclenché");
}
};
$(document).bind("scroll", handlerEndPage);
load("", start, limit, handlerEndPage);
start += limit;
// Gestion de la barre de recherche
let old_search = "";
let search = "";
$("#clear").on("click", function () {
setTimeout(function () {
$("#videos").empty();
$("#loader_active").show();
search = $("#search").val();
console.log("rechargement");
start = 0;
limit = 30;
load(search, start, limit, handlerEndPage);
start += limit;
}, 100);
});
$("#search").on("keyup paste", function () {
setTimeout(function () {
$("#videos").empty();
$("#loader_active").show();
search = $("#search").val();
console.log("rechargement");
start = 0;
limit = 30;
load(search, start, limit, handlerEndPage);
start += limit;
}, 100);
});
// Gestion des Play/Pause de chaque vidéo
$(document).on("click", ".video-box", function () {
console.log("ok detected");
if (this.children[0].paused) {
console.log(this.children[0]);
$(this).children("#video_tag").removeClass("pause");
$(this).children("#video_tag").addClass("play");
let playPromise = this.children[0].play();
if (playPromise !== undefined) {
playPromise
.then((_) => {
// Automatic playback started!
// Show playing UI.
})
.catch((error) => {
// Auto-play was prevented
// Show paused UI.
});
}
} else {
this.children[0].pause();
$(this).children("#video_tag").removeClass("play");
$(this).children("#video_tag").addClass("pause");
}
});
</script>
</html>
ShowVideo function:
function showVideo(videoData, autoplay=false) {
// VIDEO BOX
let videoBox = $("<div/>", {
class: "video-box",
id: "append"
});
let video = $('<video />', {
src: "http://siteurl.com/videos/" + videoData.lien,
preload: "none",
controls: false,
autoplay: false,
poster: "http://siteurl.com/thumbnails/"+videoData.id_video+".jpg",
id : "video_tag"
});
let vidElements = $("<div/>", {
class: "vid-elements"
});
// ICONS
let stateIcon = $("<div/>", {
class: "state-icon"
});
let playArrow = $("<span/>", {
class: "material-icons"
});
playArrow = playArrow.html('play_arrow');
let pause = $("<span/>", {
class: "material-icons"
});
pause = pause.html('pause');
stateIcon = stateIcon.append(playArrow)
stateIcon = stateIcon.append(pause)
vidElements = vidElements.append(stateIcon)
//<div className="bottom-elements">
// <p className="vid-title">Meme title</p>
// <button type="button" className="favorite">
// <span className="material-icons">favorite</span>
// </button>
// </div>
let bottomElements = $("<div/>", {
class: "bottom-elements"
});
let buttonFavorite = $("<button/>", {
class: "favorite",
type: "button"
});
let memeTitle = $("<p/>", {
class: "vid-title"
});
memeTitle = memeTitle.html(videoData.titre)
let favorite = $("<span/>", {
class: "material-icons"
});
favorite = favorite.html("favorite")
buttonFavorite = buttonFavorite.append(favorite)
bottomElements = bottomElements.append(memeTitle)
bottomElements = bottomElements.append(buttonFavorite)
vidElements = vidElements.append(bottomElements)
videoBox = videoBox.append(video)
videoBox = videoBox.append(vidElements)
return videoBox
}
Example of result after ajax call (videos are crossing hover each other once I execute:
