Javascript 无法用我的代码实现无限滚动

我读过多个关于无限滚动的例子，但我发现很难在我的代码中实现它。下面是代码，其中数据从MySQL数据库中显示：

<div class="container" align="center" style="margin-top:100px;margin-bottom:100px"><div class="row">
<?php 
    $result = mysql_query("SELECT * FROM batai WHERE svarbumas=1 ORDER BY id DESC");
    while ($row = mysql_fetch_array($result))
       {
           extract($row);
           $link=$row["linkas"];
           echo "<div class='col-md-4'>";
           $sites_html = file_get_contents($link);
           $html = new DOMDocument();
           @$html->loadHTML($sites_html);
           $meta_og_img = null;
           //Get all meta tags and loop through them.
           foreach($html->getElementsByTagName('meta') as $meta) {
               //If the property attribute of the meta tag is og:image
               if($meta->getAttribute('property')=='og:image'){ 
                  //Assign the value from content attribute to $meta_og_img
                  $meta_og_img = $meta->getAttribute('content');
               }
            }
           list($width, $height) = getimagesize($meta_og_img);
           $skaicius = abs($width - $height);
           if($width > $height) {
             echo "<img src=\"$meta_og_img\" style='height:234px;margin-left:-33%' onclick='window.open(\"$link\", \"_blank\");'>";
            }
           else if($width < $height) {
               if($skaicius < 100){
                   echo "<img src=\"$meta_og_img\" style='width:234px'
    onclick='window.open(\"$link\", \"_blank\");'>";
                }
                else {
                   echo "<img src=\"$meta_og_img\" style='width:234px;margin-top:-33%'
    onclick='window.open(\"$link\", \"_blank\");'>";
                }
           }
           echo "</div>";
    }
?>