动态加载与无限滚动对齐画廊图像

Question

我使用jQuery Justified画廊与内置无限滚动插件。

http://miromannino.github.io 

这可能是个愚蠢的问题，但我怎样才能动态地使用PHP加载图像。

我知道如何使用下面的无限滚动插件来做到这一点，但是这个插件无法使用无限滚动插件。

http://www.infinite-scroll.com/ 

代码

$('#gallery').justifiedGallery({rowHeight:120}); 


$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     for (var i = 0; i < 5; i++) { 
      $('#gallery').append('<a>' + 
       '<img src="http://path/to/image" />' + 
       '</a>'); 
     } 
     $('#gallery').justifiedGallery('norewind'); 
    } 
}); 

Answer 1

$('#gallery').justifiedGallery({rowHeight:120}); 


    $(window).scroll(function(){ 
     if($(window).scrollTop() + $(window).height() == $(document).height()){ 
      //jquery ajax for dynemic loading images 
      $.ajax({ 
       type:'post',//method can bet get,post 

       url:'yourPHPFile.php',//url of your php file 

       data:{"key":value},//if you want to send some data for query 

       success:function(result){ //function call when successful response from server 

        var PhpImageArray=JSON.parse(result); 
        $.each(PhpImageArray, function(index, item) { 
         $('#gallery').append('<a>' + 
          '<img src="http://path/to/image"'+item.image+' />' + 
           '</a>'); 
        }); 
       } 
      }); 

     $('#gallery').justifiedGallery('norewind'); 
     } 
    }); 

phpfile.php

<?php 
    //array contain image object as 
    $img_array=array(); 

    //your database query 
    $query=mysqli_query($DB_connect,"select imageName from ImageTable");  
    while($img=mysqli_fetch_array($query)) 
    { 
     //object name with "image" 
     $obj["image"]=$img["imageName"]; 

     //push object to arraay 
     array_push($img_array,$obj); 
    } 

    //convert array in to json format for javascript use 
    echo json_encode($img_array); 
    ?> 

Answer 2

您可以通过使用Javascript

var offset = $('#gallery').children().length 

然后，你可以对一个给定的路线Ajax调用计数图像数量（例如/ giveImages），返回一个包含图像URL的JSON阵列

$.get('/giveImages?offset=' + offset, function(data) { 
    // data = [ 
    // 'http://foo.com/image/3.jpg',        
    // 'http://foo.com/image/4.jpg', 
    // 'http://foo.com/image/5.jpg' 
    // ] 

    // APPEND STUFF HERE AND justifyGallery 
}) 

全例如：

$(window).scroll(function() { 

    if($(window).scrollTop() + $(window).height() == $(document).height()) { 

    var offset = $('#gallery').children().length 

    $.get('/giveImages?offset=' + offset, function(data) { 

     for(var i = 0; i < data.length; i++) { 

     $('#gallery').append(
      '<a>' + 
       '<img src="' + data[i] + '" />' + 
      '</a>' 
     ) 

     $('#gallery').justifiedGallery('norewind') 

     } 

    }) 
    } 
}