Why my Php/Jquery script causes the images to overlap?

Why my Php/Jquery script causes the images to overlap?

I'm using jQuery Infinite Scroll Pagination in conjunction with masonry to position each element in the next open spot in the grid , and within this script i have a (while loop) that fetches records from the database, everything seems to be working properly until i start to scroll down then something goes wrong and causes item elements to overlap showing the images overlapping one another.

I tried solutions like Imagesloaded but i had no luck.

Kindly check out my code below and tell me what goes wrong.

Thank you for your help.

Here is my code.

  1. <?php
  2. $limit = 10;
  3. $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
  4. $sql = "SELECT * FROM `table` ORDER BY `img_id` DESC";
  5. $start = ($page * $limit) - $limit;
  6. if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
  7. $next = ++$page;
  8. }
  9. $query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
  10. if (mysql_num_rows($query) < 1) {
  11. header('HTTP/1.0 404 Not Found');
  12. echo 'Page not found!';
  13. exit();
  14. }
  15. ?>
  16. <html>
  17. <head>
  18. <title>Page Title</title>
  19. <link rel="stylesheet" href="path/to/style.css">
  20. </head>
  21. <body>
  22. <div id="container">
  23. <?php while ($row = mysql_fetch_array($query)): ?>
  24. <div class="item item-<?php echo $row['img_id']?>">
  25. <?php
  26. $image_file = 'path/to/images/files.extension';
  27. echo '<img src="'.$image_file.'" />';
  28. ?>
  29. </div>

  31. <?php endwhile?>
  32. <?php if (isset($next)): ?>
  33. <div class="nav">
  34. <a href='thisPage.php?p=<?php echo $next?>'>Next</a>
  35. </div>
  36. <?php endif?>
  37. </div>

  39. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  40. <script type="text/javascript" src="path/to/jquery-ias.min.js"></script>
  41. <script type="text/javascript" src="path/to/masonry.pkgd.js"></script>

  43. <script type="text/javascript">
  44. $(document).ready(function(){
  45. var $container = $('#container');
  46. $container.masonry({
  47. filter: '*',
  48. animationOptions: {
  49. duration: 750,
  50. easing: 'linear',
  51. queue: false,
  52. }
  53. });

  55. $(document).ready(function() {
  56. jQuery.ias({
  57. container : '#container',
  58. item: '.item',
  59. pagination: '.nav',
  60. next: '.nav a',
  61. loader: 'Loading More Items. . .',
  62. triggerPageThreshold: 3
  63. });
  64. });
  65. });
  66. </script>
  67. </body>
  68. </html>