js/plugin/pubu/瀑布流demo/pubu.html

（开头部分） 6KB

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

<!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" />
<title>瀑布流</title>
<style>
body, div { margin: 0; padding: 0 }
img { border: 0 }
.container { text-align: center }
.cell { padding: 5px; border: 1px solid #E3E3E3; background: #F5F5F5;width:204px;float: left;margin:10px}
.container p { line-height: 20px; margin-top: 5px }
/* more */
#more { display: block; margin: 10px auto 20px; }
/* infscr-loading */
#infscr-loading { bottom: -10px; left: 45%; position: absolute; text-align: center; height: 20px; line-height: 20px; z-index: 100; width: 120px; font-size:12px;color:#535353}
/* page */
.page { display: none; font-size: 18px; height: 60px; text-align: center; margin: 20px 0 0 0; }
.page_num a, .page_num span { margin: 0 2px; background: #000; display: inline-block; width: 30px; height: 28px; line-height: 26px; overflow: hidden; }
.page_num a { background-position: -65px 0; color: #FF3333; overflow: hidden; }
.page_num .prev { background-position: 1px -33px; }
.page_num .unprev { background-position: 1px 0; cursor: default; }
.page_num .next { background-position: -32px 0; }
.page_num .unnext { background-position: -32px -33px; cursor: default; }
.page_num .current { background-position: -99px 0; color: #FFFFFF; }
.page_num .etc { background-position: -172px 8px; }
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.masonry.js"></script>
<script type="text/javascript" src="scripts/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
//设置瀑布流
function item_masonry(){ 
	$(".cell img").load(function(){ 
		$(".container").masonry({ // .container是页面里面装瀑布流单元格的容器,项目中最好用ID来指定
			itemSelector: ".cell", 
			columnWidth:226,
			gutterWidth:15								
		});		
	});

	//下面同上,指定加载瀑布流的容器
	$(".container").masonry({ 
		itemSelector: ".cell", // 每一个单元格的class
		columnWidth:226, // 每一个单元格的宽
		gutterWidth:15	// 每一个单元格之间的空隙							
	});	
}

$(function(){
	/*首次打开执行瀑布流*/
	item_masonry();	
	
    //加载效果
	$(".cell").fadeIn();
	
	var sp = 1;//这个变量是静态页的,项目中需要后台来做翻页
	$(".container").infinitescroll({
		navSelector  	: "#more", // 加载数据的容器，需要css设置隐藏
		nextSelector 	: "#more a", // 包含加载数据链接的选择器
		itemSelector 	: ".cell", // 瀑布流下的单元格class
后面还有 156 行代码，解锁后查看完整代码

24 小时内免费解锁 3 个项目，之后 1 算力/个。 规则说明

AI 解读 AI

登录后可用，每次 10 算力，解读结果公开显示在下面。

还没有人解读过这个文件。