php+jquery写的瀑布型动态加载网站中遇到有一个问题，求解

这个问题本来是发在PHP版块里，结果里面有大师说是JS问题，所以请高手指教，下面是我和那个PHP大师的对话这个程序主要是用thinkphp写的，中间有BUG找了两天资料都没搞定，现在我把程序贴出来希望大家能帮我找找原因。
首先是我的Lib/Action/IndexAction.class.php类
<?php
// 本类由系统自动生成，仅供测试用途
class IndexAction extends Action {
public function _initialize(){
header("Content-Type:text/html; charset=utf-8");
}
  public function index(){
  $this->display();
  }
public function load(){
$pic=M("picture");
$list=$pic->limit($_POST['gs'].",4")->select();
if(count($list)){
echo json_encode($list);
}else{
echo "{}";
}
}
}
下面是index操作对应的模板index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="/mis/__PUBLIC__/style/admin.css" />
<script type="text/javascript" src="/mis/__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="/mis/__PUBLIC__/js/ajax.js"></script>
<title>加载测试</title>
</head>
<body>
<div class="main">
 <div class="spic" id="1" style=" left:0px; top:0px;"><img src="/mis/Public/upload/1.jpg"></div>
 <div class="spic" id="2" style=" left:250px; top:0px;"><img src="/mis/Public/upload/2.jpg"></div>
 <div class="spic" id="3" style=" left:500px; top:0px;"><img src="/mis/Public/upload/3.jpg"></div>
 <div class="spic" id="4" style=" left:750px; top:0px;"><img src="/mis/Public/upload/4.jpg"></div>
 <div class="spic" id="5" style=" left:0px; top:184px;"><img src="/mis/Public/upload/5.jpg"></div>
 <div class="spic" id="6" style=" left:250px; top:333px;"><img src="/mis/Public/upload/6.jpg"></div>
 <div class="spic" id="7" style=" left:500px; top:288px;"><img src="/mis/Public/upload/7.jpg"></div>
 <div class="spic" id="8" style=" left:750px; top:161px;"><img src="/mis/Public/upload/8.jpg"></div>  
</div>
</body>
</html>
下面是ajax.js的代码：
// JavaScript Document
$(document).ready(function(){
var gx=new Array('0','250','500','750');
var gxy=new Array();
function getxy(){
var gy=new Array();
var gnews=$(".main .spic").length;
var gxindex=gnews%4;
var gy1=gy2=gy3=gy4=0;
$(".main .spic").each(function(i,vo){
if(i%4==0){
gy1=$(this).height()+gy1+10;
}else if(i%4==1){
gy2=$(this).height()+gy2+10;
}else if(i%4==2){
gy3=$(this).height()+gy3+10;
}else if(i%4==3){
gy4=$(this).height()+gy4+10;
}
});
gy[0]=gy1;
gy[1]=gy2;
gy[2]=gy3;
gy[3]=gy4;
gxy[0]=gx[gxindex];
gxy[1]=gy[gxindex];
return gxy;
}
$(window).bind("scroll",function() {
if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
var gs=$(".main .spic").length;
$.post("http://localhost/mis/index.php/Index/load/",{gs:gs},function(data){
var gjson = eval("("+data+")");
if(gjson.length){
$.each(gjson,function(n,value) {
gxy=getxy();
$("<div class='spic' id='"+value.id+"' style=' left:"+gxy[0]+"px; top:"+gxy[1]+"px;'><img src='"+value.dir+"'></div>").appendTo(".main");
});
}else{
return false;
}
});
}
});
 });
上面使用的都是绝对定位，是通过计算图片在容器中所排的位置计算他的高度。
下面是CSS
@charset "utf-8";
.sub{ margin:0px auto; width:1000px; height:30px; cursor:pointer; color:#03F;}
.main{ margin:0px auto; width:1000px; position:relative;}
.spic{ border:1px solid #d3d3d3; position:absolute;}
.spic img{ width:240px;}
现在的问题是，每当我加载一次后，我希望的是按照我数据库里的顺序每次加载四张。但是结果是每次可能是因为他在加载过程中，因为导航条在处在下端我规定高度处不停的重复加载，所以希望大家里能我出出注意
 
 
 
PHP大师回复于：2012-10-19 12:59:02先检查 $_POST['gs'] 的值
在 public function load(){ 中
file_put_contents('test.txt', $_POST['gs'] . PHP_EOL, FILE_APPEND); 
我回复于：2012-10-19 13:40:06这个地方没得问题，$_POST['gs']获取的是当然容器中已经存在的图片张数，然后通过这个数字我会在数据库里第$_POST['gs']张向下取4张。我刚做了一下测试，ajax返回的值也是我想要的值，只是这个返回值被返回了3次，所以导致连续连续加载了3次返回的4张图片。我觉得问题是返回来的值在加载的过程导航条回移动，于是又产生了后面的ajax事件，所以要解决加载过程中不能产生ajax事件。 
PHP大师回复于：2012-10-19 13:44:28你直接绑定滚动条事件，那自然就会有问题的不过这是 js 的问题了，请到 web--javascript 版面去求解 

解决方案 »

  1.   

    将$(window).bind("scroll",function() {})
    这一段，丢进
    window.onload中去试试
      

  2.   

    按crying_boy说的做了，还是不太行，这样吧。我把这个东西放在我个人站上，您可以上去测试。帮我想想招，代码我就贴在这里了
      

  3.   

    我的测试网址是：www.ipeiyi.com
      

  4.   

    将window.onload那段代码改成这样试试。记录一个是否正在加载的状态值。应该可以避免你这个重复加载的问题
        var isLoad=!1;
        window.onload=function(){
            $(window).bind("scroll",function() {
                if(!isLoad){
                if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
                      isLoad=!0;
                  var gs=$(".main .spic").length;
                  $.get("http://www.ipeiyi.com/index.php/Index/load/",{gs:gs},function(data){
                  var gjson = eval("("+data+")");
                  if(gjson.length){
                   $.each(gjson,function(n,value) {
                  gxy=getxy();
                  $("<div class='spic' id='"+value.id+"' style=' left:"+gxy[0]+"px; top:"+gxy[1]+"px;'><img src='"+value.dir+"'></div>").appendTo(".main");
                   });
                   isLoad=!1;
                  }else{
                  return false;
                  }
                  });
                 }
             }
            });
        };
      

  5.   

    虽然您的方案并没有实现我想要达到的效果，不过目前我已经有了解决了这个问题，不过没有用THINKPHP，您可以看一下（http://www.ipeiyi.com/leisi/）