这两天把轻图床转移到新浪 SAE 了，原本所在的 VPS 速度太不给力了，而且常抽风，因此早就有转移的打算了，只是一直不舍 VPS 的自由，不过最近一天几抽，于是不再犹豫了，果断转移之。
转移至 SAE 后网站加载速度给力多了，稳定性也有了很大的保证！不过原本的域名没有备案，因此绑定到 SAE 后服务器线路走的是美国路线，不停的 502 ，只能使用 SAE 的二级域名。
欢迎各种围观：http://lighthumbs.sinaapp.com/
移动版 http://lighthumbs.sinaapp.com/m/
在转移到 SAE 的过程中，修复了网站的一些 Bug ，主要是 PHP 方面之前使用了一些不推荐的 PHP 函数，这次全部改进了，另外就是瀑布流方面的 Bug 了。
在《瀑布流布局与 jQuery Ajax 分页》中， Kayo 提出了一种瀑布流布局的方案，最近有童鞋反映会出现一个 Bug —— 在翻页时有时会出现一片空白。
在解决这个 Bug 前不妨先了解一下 Bug 形成的原因——瀑布流布局采用的是滚动页面触发 Ajax 分页，判断滚动条滚动距离达到一定条件时触发，这样实际操作时便很容易触发多次的分页，而新追加的内容是通过 Masonry 的追加方法进行流体布局，因此只有最后一次 Ajax 获得的内容会有流体布局，其他内容便会移位造成空白。
接下来就是 Bug 的解决方案，既然 Bug 形成是因为触发了多次 Ajax 分页，因此可以在触发了一次 Ajax 请求后便禁止滚动触发分页，改进后的完整分页代码如下（代码是根据《瀑布流布局与 jQuery Ajax 分页》文中的瀑布流布局代码改进的，完整的布局原理和代码参见前文）：
// 初始化 sentIt
var sentIt = true;
nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部，加入 sentIt 判断，当触发一次 Ajax 分页时把 sentIt 设为 false，禁止触发多余的 Ajax 请求
if( $(document).scrollTop() + $(window).height() > $(document).height() - 30 && sentIt ) {
// 判断下一页链接是否为空
if( nextHref != undefined ) {
// 显示正在加载模块
$("#page_loading").show("slow");
// Ajax 翻页
$.ajax( {
url: $("#page_nav a").attr("href"),
type: "POST",
beforeSend: function(){sentIt = false; }, // 触发了一次 Ajax 分页时把 sentIt 设为 false
success: function(data) {
result = $(data).find("#thumbs .imgbox");
nextHref = $(data).find("#page_nav a").attr("href");
$("#page_nav a").attr("href", nextHref);
$("#thumbs").append(result);
// 把新的内容设置为透明
$newElems = result.css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems, true );
// 渐显新的内容
$newElems.animate({ opacity: 1 });
// 隐藏正在加载模块
$("#page_loading").hide("slow");
});
},
complete: function(){setTimeout(sentIt = true, 600); } // 完成 Ajax 请求后重新设 sentIt 为 true
});
} else {
$("#page_loading span").text("木有了噢，最后一页了！");
$("#page_loading").show("fast");
setTimeout("$('#page_loading').hide()",1000);
setTimeout("$('#page_loading').remove()",1100);
}
}
});
测试改进后的瀑布流布局可以到轻图床首页。
2013/12/23 更新
轻图床已经全新改版，去掉原有的瀑布流布局，需要参考原有的瀑布流布局效果可以浏览这个另外制作的 Demo（只保留瀑布流翻页和第一张图片的链接，其他的功能入口已经去掉）。
本文由 Kayo Lee 发表，本文链接：https://kayosite.com/lighthumbs-transfer-to-sae-and-improve-cascade-layout.html
Pingback
评论列表
complete: function(){setTimeout(sentIt = true, 600); }
这句firefox下报错了哦~
complete: function(){
setTimeout(function(){sentIt = true;},600);
}
这个真不错。哈哈哈。特别是还有移动版。
奇了怪了，还是会有这个bug，难道我哪里写错了，还是会同时加载两次ajax同一个内容的，博主，求解？
博主我又来了，刚才试了下，在FF还是不行，还有在ie，会提错’jQuery.event.handle’ 为空或不是对象？但是在猎豹浏览器就没有问题，这是怎么回事呢？
这个移动版 http://lighthumbs.sinaapp.com/mobile/打不开，提示页面已经不存在了
@相聚一刻 之前的移动版的不配合新的桌面版的风格了，并且收到 Spamer 的骚扰，所以重新设计了一个移动版，准备上线了！
这个ajax无刷新分页在iphone上的Safari浏览器无效 其他的浏览器都没问题 这个有什么解决方法吗？
怎么我Ajax加载不了，一拉到下面就是最后一页了
下一页
这个链接应该没有问题吧 可以给你的邮箱或者QQ我吗 我想详细问下你
移动版还是打不开呢， 什么时候上线？期待ing
@hisen 移动版其实完成了很久，一直忘记更新上面的链接，抱歉，也谢谢你的提醒。
新的地址：lighthumbs.sinaapp.com/m/
两年后回来找竟然还在 给弟弟看学习思路 感谢博主
你好,看到这篇文章..真是我要实现的功能.我看到你讲解前台滚动加载javascript很详细,
但是后台php的分段获取数据却没有详细讲解..
能否写一个小例子 摆放在博文里 提供下载,方便阅读学习理解代码!
我现在就是对php后台处理数据这块不明白.望你能指点一二!不甚感激!
很喜欢你的个人站前端，能给代码看看吗，如果可以发我邮箱，谢谢！
你好，用了您的代码，加载效果很不错，不过有一个问题，一直向下滚动的话会一直加载，比如我又5页。加载完5页还会再加载，看代码显示加载的是第一页。请问这个是什么原因呢，是我哪里有问题么