PHP、MySQL 和 JQuery 问题？

Question

我有这个脚本来显示我将在下面显示的所有用户图像。

我的问题： 有没有一种方法可以显示 MySQL 数据库中的前 10 张图像，并让脚本隐藏其余的用户图像，直到用户单击链接 <a href="#">View All</a> 并拥有当用户单击链接时，其余图像会向下滑动？

这是我的 PHP 和 MySQL 脚本吗？

$multiple = FALSE;
$row_count = 0;

$dbc = mysqli_query($mysqli,"SELECT *
                             FROM images
                             WHERE images.user_id = '$user_id'");
if (!$dbc) {
    print mysqli_error($mysqli);
} else {
    while($row = mysqli_fetch_array($dbc)){ 

    if(($row_count % 5) == 0){
        echo '<ul>';
    }
        echo '<li><img src="/images/thumbs/' . $row['url'] . '" /></li>';

if(($row_count % 5) == 4) {
    $multiple = TRUE;
    echo "</ul>";
} else {
    $multiple = FALSE;
}
$row_count++;
}
if($multiple == FALSE) {
    echo "</ul>";
}
}
echo '<a href="#">View All</a>';

Answer 1

将图像分成两部分。并将第二部分设置为隐藏。然后将单击处理程序添加到 slideDown。代码如下：

更新：没有必要将前 10 张图像放入 div，但也不会造成伤害。

PHP

<?php

//echo  '<div id="images">';  // visible images

while($row = mysqli_fetch_array($dbc)) {

  // other stuff
  // ...

  // after the 10th image (0-9)
  // open the hidden div
  if ($i == 9) {
    //echo  '</div>';          // end of visible images
    echo  '<div id="hidden">'; // hidden images
  }
}

echo '</div>'; // end of hidden
echo '<a href="#" id="view_all">view all</a>'; // view all

?>

jQuery

$(document).ready(function(){
    $("#hidden").hide();
    $("#view_all").click(function(){
      $("#hidden").slideDown();
    });
});

See it in action

注意：一定不要用 CSS 隐藏 div。您在 jQuery 中执行此操作，从而允许禁用 JS 的用户获取内容。

Answer 2

我不确定这些图像有多少或有多大，但如果您想让它具有可扩展性，我建议您执行一个 ajax 回调来检索并填充“隐藏”图像（如果用户请求）他们。

Answer 3

是的，在您的循环中回显列表项，当计数大于 10 时添加 style="display:hidden" class="hidden" 属性。然后使用窗口的滚动事件检测浏览器何时滚动到窗口底部附近，然后使用 jQuery 显示第一个隐藏的列表项。

编辑：这实际上会在用户向下滚动时显示项目，并且不需要“显示所有按钮”。

JQuery：

$(".hidden").hide();

$(window).scroll(function(){
    if ($(window).scrollTop()+$(window).height > $("li:hidden:first").offset().top - SOMEPADDING )) {
        $("li:hidden:first").fadeIn(200);
    }
}