这两天把轻图床转移到新浪 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
评论列表
第一篇很給力 很亮眼
很是喜歡啊
她還算嫩模嘛?
@沫 这个就得问问waphe.com了，他上传的图
果断看不懂，javascript是弱点，果断补习啊。
还有，不知道为什么，好像是我们学校网络不行，疑似被攻击，很多网站都打不开，不稳定，你文章里面的那俩也打不开。
@潜行者m 是真的被攻击，最近基本所有国外的服务器都有间断打不开的问题，电信在干活，你懂的!
右侧一大片的空白啊，文字内容都集中到左侧了
@Louis Han 这样才能突显主要的内容噢，之前的主题右侧边栏也有很多内容，不过根据谷歌分析的反映，很少人会点击侧栏的链接，所以这次果断弱化侧栏的功能！
sae长期使用要￥吧
@zwwooooo 用原创作品申请个中级开发者，每月1W云豆，问题马上解决！
求救，用d:\www\index.html这样访问正常，用127.0.0.1/index.html访问却一直显示“图片加载中”
额，ajax加载后的内容和之前的内容中间空了好多喔，
@小邪 之前的版本才会这样的啊，这文章就是介绍修复这个Bug的，你强制刷新试试！
表示加载有点慢的说。
@Demon 毕竟是图床，肯定比普通网站慢点了，不过现在转移到sae上，速度已经好多了！
@Kayo 是呀。我小站表示木压力
不错，有自己的风格
@airoschou 谢谢，会一直不断完善的！
亲，能提供一下主题包吗？
@刘不才 自用主题，暂不共享噢！
好漂亮哦。真的很轻哈
简洁大方，精细美观，好看……
你好，为什么我用上之后翻页不是新的数据追加至当前页面的尾部，而是重新加载第二页的内容？而且当前页拉到尾部的时候总是出现已经是最后一页，而事实上后面还有啊？
@toppai 你好，这样的问题应该是你的ajax url设置不正确，要不你把相关的代码(html,js)发到我邮箱研究一下吧！
博主，你好，求救!! 用了你的代码，FF\chrome下正常，唯独IE获取到数据后没反应，变量result长度为0,困扰我两天了。。
@zzz 你可以看看你所使用的jQuery库是不是旧版的呢，建议你换上1.7以上的版本，这样对ie才有比较完美的支持！
@Kayo
你好，你的文章正式我找了很久的，谢谢分享。我也是变量result长度为0，无论任何浏览器。
alert($(data).find(“#page_nav a”).attr(“href”));是undefine
alert($(data).find(“#thumbs .imgbox”).length);是0
alert(data);是正常的html，包含以上的元素
获取宽度计算后的宽度 貌似不能水平居中额
教程很好，但是美中不足的是 火狐浏览器下有较大几率出现bug，导致异步请求加载的图片出现排列错误。