1. <script>
  2. $(window).load(function(){
  3.  
  4. $('.grid').masonry({
  5. itemSelector: '.grid-item',
  6. columnWidth: '.grid-sizer',
  7. percentPosition: true
  8. });
  9.  
  10.  
  11. 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"]);
  12. var numberPage = 0;
  13. function yHandler(){
  14. // Watch video for line by line explanation of the code
  15.  
  16. var wrap = $('#posts');
  17. var contentHeight = wrap.height();
  18. var yOffset = $(window).scrollTop();
  19. var y = yOffset + $(window).innerHeight();
  20. if(y >= contentHeight && numberPage <= 5){
  21. $.ajax({
  22. type: "POST",
  23. url: "ajax_post.php",
  24. pages: boxsPages[numberPage],
  25.  
  26. success: function(result) {
  27. //alert(result);
  28. console.log("ajax="+numberPage);
  29. var $items = $(result);
  30. $('.grid').append($items).masonry('appended', $items);
  31. numberPage++;
  32. }
  33. });
  34. //console.log(numberPage);
  35.  
  36.  
  37. }
  38. //var status = document.getElementById('status');
  39. //status.innerHTML = contentHeight+" | "+y;
  40. }
  41. window.onscroll = yHandler;
  42.  
  43. });
  44.  
  45. </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/