#javascript #jquery #css #masonry
#javascript #jquery #css #masonry
Вопрос:
Я пытаюсь перезагрузить свою кладку каждый раз, когда добавляю элемент в свой с помощью ajax-запроса. Однако, похоже, пересчет кладки (я имею в виду отображение каждого блока) никогда не заканчивается.
Каждый видеоблок зависает друг над другом после загрузки, как только я повторно выполняю вручную
$grid = $('#masonry').masonry({ itemSelector: ".video-box", percentPosition: true, }); Кто — нибудь видит причину этого в моем коде ?
Вызываемая функция Ajax (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) =gt; btn.addEventListener("click", () =gt; { let direction = i gt; 0 ? "-" : " "; amount = eval(`${amount} ${direction} ${searchesWrapper.offsetWidth}`); searchesWrapper.style.setProperty("--scroll", amount "px"); if (amount gt;= 0) { scrollButtons[0].disabled = true; } else { scrollButtons[0].disabled = false; } if (Math.abs(amount - searchesWrapper.offsetWidth) gt;= 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, }); } }) } Страница перед вызовом ajax
lt;!DOCTYPE htmlgt; lt;html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"gt; lt;headgt; lt;titlegt;Tok Toklt;/titlegt; lt;meta charset="UTF-8" /gt; lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" /gt; lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous" /gt; lt;link href="http://siteurl.com/css/style.css" rel="stylesheet" /gt; lt;link href="http://siteurl.com/css/style-toktok.css" rel="stylesheet" /gt; lt;link rel="preconnect" href="https://fonts.gstatic.com" /gt; lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700amp;display=swap" rel="stylesheet" /gt; lt;link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet" /gt; lt;link rel="shortcut icon" href="http://siteurl.com/favicon.ico" type="image/x-icon" /gt; lt;link rel="apple-touch-icon" href="http://siteurl.com/image/grey_grenouille.png" /gt; lt;link rel="icon" href="http://siteurl.com/favicon.ico" type="image/x-icon" /gt; lt;script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://kit.fontawesome.com/566683bca0.js" crossorigin="anonymous"gt;lt;/scriptgt; lt;script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"gt;lt;/scriptgt; lt;/headgt; lt;script src="http://siteurl.com/js/showVideo.js"gt;lt;/scriptgt; lt;script src="http://siteurl.com/js/load.js"gt;lt;/scriptgt; lt;bodygt; lt;headergt; lt;div class="wrapper"gt; lt;form class="search-box"gt; lt;input type="search" name="search" id="search" placeholder="Rechercher ..." /gt; lt;button id="search-btn"gt; lt;span id="clear" onclick='$("#search").val("");' class="material-icons"gt;searchlt;/spangt; lt;/buttongt; lt;/formgt; lt;button type="button" id="upload-btn"gt; lt;span class="material-icons"gt;video_calllt;/spangt; lt;spangt;Uploadlt;/spangt; lt;/buttongt; lt;button type="button" id="sign-in-btn"gt; lt;span class="material-icons"gt;account_circlelt;/spangt; lt;spangt;Sign inlt;/spangt; lt;/buttongt; lt;nav id="menu" aria-hidden="true"gt; lt;div class="list"gt; lt;p class="list-title"gt;List 1lt;/pgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Item 1lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 2lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 3lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 4lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="list"gt; lt;p class="list-title"gt;List 2lt;/pgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Item 1lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 2lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 3lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 4lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="list"gt; lt;p class="list-title"gt;List 3lt;/pgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Item 1lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 2lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 3lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 4lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="list"gt; lt;p class="list-title"gt;List 4lt;/pgt; lt;ulgt; lt;ligt;lt;a href="#"gt;Item 1lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 2lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 3lt;/agt;lt;/ligt; lt;ligt;lt;a href="#"gt;Item 4lt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;/navgt; lt;button type="button" id="menu-btn"gt; lt;span class="material-icons"gt;menult;/spangt; lt;span class="material-icons"gt;closelt;/spangt; lt;/buttongt; lt;/divgt; lt;/headergt; lt;section id="searches"gt; lt;div class="wrapper"gt; lt;div class="searches-top"gt; lt;h1 class="section-title"gt;Trending Searcheslt;/h1gt; lt;div class="scroll-buttons"gt; lt;button type="button" class="scroll-btn" disabledgt; lt;span class="material-icons"gt;chevron_leftlt;/spangt; lt;/buttongt; lt;button type="button" class="scroll-btn"gt; lt;span class="material-icons"gt;chevron_rightlt;/spangt; lt;/buttongt; lt;/divgt; lt;/divgt; lt;div class="searches-container"gt; lt;div class="searches-wrapper"gt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/511.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/510.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/505.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/506.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/507.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/508.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/492.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/493.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/494.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/495.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/496.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/497.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/498.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;a href="#" class="search-box"gt; lt;video src="http://siteurl.com/videos/499.mp4" preload="metadata"gt;lt;/videogt; lt;p class="search-title"gt;Search taglt;/pgt; lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/sectiongt; lt;section id="trending"gt; lt;div class="wrapper"gt; lt;h1 class="section-title"gt;Dernières vidéoslt;/h1gt; lt;div id="masonry" class="trending-container"gt;lt;/divgt; lt;/divgt; lt;/sectiongt; lt;/bodygt; lt;script src="http://siteurl.com/js/script.js"gt;lt;/scriptgt; lt;scriptgt; 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() gt; $(document).height() - 100 || (agentID amp;amp; $(window).scrollTop() $(window).height() 200 gt; $(document).height())) { load($("#search").val(), start, limit, handlerEndPage); start = limit; console.log("Fin de page détectée -gt; 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((_) =gt; { // Automatic playback started! // Show playing UI. }) .catch((error) =gt; { // Auto-play was prevented // Show paused UI. }); } } else { this.children[0].pause(); $(this).children("#video_tag").removeClass("play"); $(this).children("#video_tag").addClass("pause"); } }); lt;/scriptgt; lt;/htmlgt; ShowVideo function:
function showVideo(videoData, autoplay=false) { // VIDEO BOX let videoBox = $("lt;div/gt;", { class: "video-box", id: "append" }); let video = $('lt;video /gt;', { 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 = $("lt;div/gt;", { class: "vid-elements" }); // ICONS let stateIcon = $("lt;div/gt;", { class: "state-icon" }); let playArrow = $("lt;span/gt;", { class: "material-icons" }); playArrow = playArrow.html('play_arrow'); let pause = $("lt;span/gt;", { class: "material-icons" }); pause = pause.html('pause'); stateIcon = stateIcon.append(playArrow) stateIcon = stateIcon.append(pause) vidElements = vidElements.append(stateIcon) //lt;div className="bottom-elements"gt; // lt;p className="vid-title"gt;Meme titlelt;/pgt; // lt;button type="button" className="favorite"gt; // lt;span className="material-icons"gt;favoritelt;/spangt; // lt;/buttongt; // lt;/divgt; let bottomElements = $("lt;div/gt;", { class: "bottom-elements" }); let buttonFavorite = $("lt;button/gt;", { class: "favorite", type: "button" }); let memeTitle = $("lt;p/gt;", { class: "vid-title" }); memeTitle = memeTitle.html(videoData.titre) let favorite = $("lt;span/gt;", { 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: