首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用无限滚动动态加载对齐的图库图像

使用无限滚动动态加载对齐的图库图像
EN

Stack Overflow用户
提问于 2016-09-18 20:37:53
回答 2查看 1.9K关注 0票数 8

我正在使用带有内置无限滚动插件的jQuery Justified图库。

代码语言:javascript
运行
复制
http://miromannino.github.io 

这可能是一个愚蠢的问题,但我如何才能用PHP动态加载图像。

我知道如何使用下面的无限滚动插件,但是这个插件不能使用无限滚动插件。

代码语言:javascript
运行
复制
http://www.infinite-scroll.com/

代码

代码语言:javascript
运行
复制
$('#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');
    }
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-21 00:26:14

代码语言:javascript
运行
复制
    $('#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

代码语言:javascript
运行
复制
    <?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);
    ?>
票数 5
EN

Stack Overflow用户

发布于 2016-09-21 00:03:01

您可以使用Javascript计算图像的数量

代码语言:javascript
运行
复制
var offset = $('#gallery').children().length

然后,您可以对给定的路由(例如/giveImages)进行ajax调用,这将返回一个包含图像URL的JSON数组

代码语言:javascript
运行
复制
$.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 
})

完整示例:

代码语言:javascript
运行
复制
$(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')

      }

    })
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39557706

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档