<!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>
<script charset="UTF-8" type="text/javascript" src="jquery.js"></script>
<script charset="UTF-8" type="text/javascript" src="jquery.easing.js"></script>
<script charset="UTF-8" type="text/javascript" src="jquery.vgrid.js"></script>
<script type="text/javascript">
//<![CDATA[
(function($){
$(function(){
var setGrid = function () {
return $("#grid-wrapper").vgrid({
easeing: "easeOutQuint",
time: 800,
delay: 60,
selRefGrid: "#grid-wrapper div.grid-item x1",
selFitWidth: ["#container1"],
//gridDefWidth: 290 + 15 + 15 + 5,
forceAnim:1 });
};
setTimeout(setGrid, 300);
}); // end of document ready
})(jQuery); // end of jQuery name space
//]]>
</script></head>
<style type="text/css">
.c_center{margin:0px auto;}
div.x1{
width:290px;
}
div.grid-item{
background-color: #FFFFFF;
border: 0 none;
margin: 0 5px 5px 0;
overflow: hidden;
padding: 15px 15px 30px;
}
</style>
<body>
<div id="container1" class="c_center">
<div id="grid-wrapper" style="position: relative; width: auto; overflow: hidden; padding-top: 0px; background:#000; height:1000px;">
<div style="height:840px;background:blue;" class="grid-item x1">
<div style=" height:840px; line-height:840px; font-size:20px; text-align:center; color:#fff;">影楼信息 AND 获奖信息</div>
</div>
<div style="width:615px;height:540px;background:blue" class="grid-item x1">
<div style="width:615px; height:540px;line-height:540px; font-size:20px; text-align:center;color:#fff;">抽奖模块</div>
</div>
<div style="height:290px;background:blue" class="grid-item x1">
<div style=" height:290px;line-height:290px; font-size:20px; text-align:center;color:#fff;">奖品A</div>
</div>
<div style="height:290px;background:blue" class="grid-item x1">
<div style=" height:290px;line-height:290px; font-size:20px; text-align:center;color:#fff;">奖品B</div>
</div>
<div style="height:290px;background:blue" class="grid-item x1">
<div style=" height:290px;line-height:290px; font-size:20px; text-align:center;color:#fff;">奖品C</div>
</div>
<div style="height:290px;background:blue" class="grid-item x1">
<div style=" height:290px;line-height:290px; font-size:20px; text-align:center;color:#fff;">奖品D</div>
</div>
<div style="height:290px;background:blue" class="grid-item x1">
<div style=" height:290px;line-height:290px; font-size:20px; text-align:center;color:#fff;">奖品E</div>
</div>
<?php
for($i=0;$i<=100;$i++){
$color = rand(0,3);
if($color==0){
$color = "#ccc";
}else if($color==1){
$color = "red";
}else if($color==2){
$color = "green";
}else{
$color = "yellow";
}
if(rand(0,2)<=1){
$div_width = '290';
}else{
$div_width = '590';
}
echo '<div style="height:'.rand(100,500).'px;background:'.$color.'" class="grid-item x1">';
echo '<div>微博内容'.$i.'</div>';
echo '</div>';
}
?>
</div>
</div>
</body>
</html>
基于Jquery可居中显示并兼容IE6+/FF等浏览器的瀑布流程序(jquery.easing.js,jquery.vgrid....
4星 · 超过85%的资源 需积分: 10 73 浏览量
2012-09-12
11:49:48
上传
评论 4
收藏 264KB ZIP 举报 
瀑布流研究.zip （4个子文件） 
瀑布流研究 
jquery.js 242KB index.php 3KB jquery.easing.js 8KB jquery.vgrid.js 10KB
- 1
- 2
- 3
前往页