运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<title>简单的瀑布流</title>
6
<style type="text/css">
7
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px ""; }
8
.wrapper{width:100%; height:100%; overflow:hidden;}
9
#lxf_box li{background:#fff; width:200px; height:50px; border:solid 1px #ccc; text-align:center; padding:10px; margin:10px; transition:all 0.7s ease-out 0s}
10
</style>
11
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
12
<script type="text/javascript">
13
jQuery(document).ready(function($){
14
for(var i=0, j=24; i<j; i++){//i控制循环,代表li的序号,j表示li的长度、个数、大小
15
    $("#lxf_box").append("<li><h3>"+i+"</h3></li>");
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
JS简易瀑布流例子
分类
表格图层
描述
简单的瀑布流例子,基于jQuery插件,打开网页后自动生成瀑布流布局,变量i控制循环,表示li的序号,j表示li的长度、个数、size,判断当li在一行放不下之后断行,每行的li的left从新开始。其实看上去太整齐了,瀑布流一般分横向和竖向,横...
收藏