Question

我的目标是在用户向下滚动时生成以下代码：

<?php
    // get all files
        $imagesDir = 'uploads/';
    $images = glob($imagesDir . '* {jpg,jpeg,png,gif,JPG,JPEG,PNG,GIG}', GLOB_BRACE);
    $imagesCount = count($images);
    for($i = 0 ; $i < $imagesCount ; $i++) {
        // select image 
        $randomIndex = array_rand($images); // select image index
        $file_title = $randomImage = $images[$randomIndex]; // use selected image
        unset($images[$randomIndex]); // remove selected image
        // print_r($images); // you can see what left in $images
        // show image
    }   
?>

<li class="item-thumbs span3 img">
   <!-- Fancybox - Gallery Enabled - Title - Full Image -->
   <a class="hover-wrap fancybox" data-fancybox-group="gallery" 
       title="<?php echo $randomImage ?>" href="<?php echo $randomImage ?>">
   <span class="overlay-img"></span>
   <span class="overlay-img-thumb font-icon-plus"></span>
   </a>
   <!-- Thumb Image and Description -->
   <img src="<?php echo $randomImage ?>" alt="{Failed To Load Item Description}">
</li>

此代码位于块内。我想生成随机图像，让它们显示在一个格式很好的区域。现在，一切正常，除了我需要自动生成此代码，以便在用户滚动时显示更多...就像Facebook在向下滚动时在墙上加载更多帖子。我尝试了很多脚本，但没有一个适合我。

Answer 1

你的查询答案是：第一件事*你必须在javascript中设置一个滚动处理程序，只要用户向上或向下滚动就会被触发*你必须放入一个将获取结果的ajax调用对于你，当滚动处理程序将被调用*和最后一件事呈现你的ajax响应

但你必须在滚动处理程序中管理用户上下移动b / c每当用户向下滚动时你将需要数据

所以我提出了一些代码示例，它使用了jquery

滚动处理程序

var lastScrollTop = 0;
var scrollHandler = function () {
var st = $(this).scrollTop();
var pageHeight = $(document).height();
var pageScrolled = $(window).scrollTop();
var pageView = $(window).height();
if (st > lastScrollTop) {
    // downscroll code
    if (st > lastScrollTop && (pageScrolled >= (pageHeight / 2))) {
        // calling scroll     after half page scrolled
        //  do nothing
    } else {
        loadMore(); // it will be called only in scroll down
    }
}


lastScrollTop = st;

}

在此函数中调用ajax

function loadMore() {
$(window).off("scroll", scrollHandler);
$.ajax({
    url: "",
    "data": '',
    success: function () {
        //  render you ajax response
        ....
        $(window).scroll(scrollHandler); // call event handle after first result render
    }

});

}

//在窗口加载后附加滚动事件

$(window).load(function () {
    $(window).scroll(scrollHandler);
});

只有剩下的逻辑是你如何确定加载了多少结果并且最后结果是什么

这么少的逻辑会给你最后一个额外的参数，它会告诉你这是个结果在调用loadMore（）之前，读取该参数并发送回ajax调用。

用户滚动时生成更多内容而不使用sql

1 个答案: