不断完善的瀑布流
效果演示：http://www.miiceic.org.cn/anli/gongkaike/
?
html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
?<head>
???? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??? <title>不断完善的瀑布流，欢迎补充</title>
??? <script language="javascript" src="http://www.miiceic.org.cn/templets/js/jquery-1.7.2.js"></script>
??? <script type='text/javascript' src='http://www.miiceic.org.cn/templets/js/jquery.masonry.min.js'></script>
</head>
<style>
#container{margin:auto;width:1000px;}
.col{float:left;width:235px;background:#ececec;margin:5px;text-align:center;}
.col:hover{background:#f00;}
#page_loading{text-align:center;}
.hover{background:#f00;}
</style>
<body>
<div id="container">
?? ?<div + s,
?? ???? ??? async: false,
?? ???? ??? beforeSend:function(){
????????????? //alert('远程调用开始...');
????????????? $("#page_loading").html("<img src='/loading.gif' />");
??????????? },
?? ???? ??? success: function (msg) {
?? ???? ??? ??? var el = jQuery(msg);
?? ???? ??? ??? $("#container").append(el).masonry('appended', el,true);
?? ???? ??? },
?? ???? ??? complete:function(){
????????????? // alert('远程调用成功，状态文本值：'+textStatus);
???????????? $("#page_loading").empty();
?????????? }
?? ???? });
?? ???? s = s+1;
??? }
});
function unscroll(){
???? $(window).unbind("scroll");?? ?
}
</script>
<script type="text/javascript">
$(function(){
? $('#container').masonry({
??? itemSelector : '.col',
??? columnWidth : 245
? });
});?? ??? ?? ?
</script>
?
php文件：
?
简单的数据库操作，此略；
?
效果演示：http://www.miiceic.org.cn/anli/gongkaike/
?
