<script> $(window).load(function(){ $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); var boxsPages = new Array(["3","11","5","15","13","2","10","8","14","7","6","12"], ["16","17","1","9","4","3","11","5","15","13","2","10"], ["8","14","7","6","12","16","17","1","9","4","3","11"], ["5","15","13","2","10","8","14","7","6","12","16","17"], ["1","9","4","3","11","5","15","13","2","10","8","14"]); var numberPage = 0; function yHandler(){ // Watch video for line by line explanation of the code var wrap = $('#posts'); var contentHeight = wrap.height(); var yOffset = $(window).scrollTop(); var y = yOffset + $(window).innerHeight(); if(y >= contentHeight && numberPage <= 5){ $.ajax({ type: "POST", url: "ajax_post.php", pages: boxsPages[numberPage], success: function(result) { //alert(result); console.log("ajax="+numberPage); var $items = $(result); $('.grid').append($items).masonry('appended', $items); numberPage++; } }); //console.log(numberPage); } //var status = document.getElementById('status'); //status.innerHTML = contentHeight+" | "+y; } window.onscroll = yHandler; }); </script>
Korzystam z 2 rozwiązań:
https://www.developphp.com/video/JavaScript...ach-Bottom-Ajax
http://masonry.desandro.com/
strona oparta o boostrap.
I jest problem. Bo nie wiem dlaczego (chociaz domyslam się, że może jakiś problem z łapaniem wyskości jest problem), ale zamiast ładować się raz to ajax laduje mi sie 4x. Ogólnie założenie ma być takie, że przesyłam z tablicy boxsPages kolejne elementy tablicy z zapisanymi id postów jakie mają mi się ładować gdy osoba przewija strone. ale nie chodzi to tak jak chce. Może ktoś pomoże ? co może być nie tak?
Ok zrobiłem pomogła mi ta strona (przyklad 2)
----------------------
https://www.sitepoint.com/jquery-infinite-scrolling-demos/