自己写的一个瀑布流，其中有BUG请大家指教

这个程序主要是用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;}
现在的问题是，每当我加载一次后，我希望的是按照我数据库里的顺序每次加载四张。但是结果是每次可能是因为他在加载过程中，因为导航条在处在下端我规定高度处不停的重复加载，所以希望大家里能我出出注意

解决方案 »

  1.   

    先检查 $_POST['gs'] 的值
    在 public function load(){ 中
    file_put_contents('test.txt', $_POST['gs'] . PHP_EOL, FILE_APPEND);
      

  2.   

    这个地方没得问题，$_POST['gs']获取的是当然容器中已经存在的图片张数，然后通过这个数字我会在数据库里第$_POST['gs']张向下取4张。我刚做了一下测试，ajax返回的值也是我想要的值，只是这个返回值被返回了3次，所以导致连续连续加载了3次返回的4张图片。我觉得问题是返回来的值在加载的过程导航条回移动，于是又产生了后面的ajax事件，所以要解决加载过程中不能产生ajax事件。
      

  3.   

    你直接绑定滚动条事件，那自然就会有问题的不过这是 js 的问题了，请到 web--javascript 版面去求解
      

  4.   

    我已经找到介绍方法，您可以查看http://www.ipeiyi.com/leisi/