简单CSS定位瀑布流实现方法
<!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" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>简单CSS定位瀑布流实现方法</title>
<style type="text/css">
/*
* @name:
* @time: 2016-12-07
* @author: wht
*/
body , html {
height: 100%;
}
/* basic */
body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }
body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }
ul { list-style:none; overflow:hidden; }
img { border:none; } /* content */
.content {margin:10px auto; } /* case-list */
.case-list { margin:0 auto; }
.case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}
.case-list li img { display:block;border-radius:5px;margin-left:5px; }
</style>
</head> <body> <!-- content -->
<div class="content" id="content">
<ul class="case-list" id="case-list">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
<li><img src="7.jpg" alt="" /></li>
<li><img src="8.jpg" alt="" /></li>
<li><img src="9.jpg" alt="" /></li>
<li><img src="10.jpg" alt="" /></li>
<li><img src="11.jpg" alt="" /></li>
<li><img src="12.jpg" alt="" /></li>
<li><img src="13.jpg" alt="" /></li>
<li><img src="14.jpg" alt="" /></li>
<li><img src="15.jpg" alt="" /></li>
<li><img src="16.jpg" alt="" /></li>
<li><img src="17.jpg" alt="" /></li>
<li><img src="18.jpg" alt="" /></li>
<li><img src="19.jpg" alt="" /></li>
<li><img src="20.jpg" alt="" /></li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
window.onload = function(){ var windowW=$(window).width();
//console.log(windowW);
var imgW=$("#case-list li>img").width();
var hNum=parseInt(windowW/imgW);
var cases = $("#case-list li");
var case_h = new Array(); for(var j=0;j<hNum;j++){
case_h[j] = new Array();
} $.each(cases, function(i){ var hNum=parseInt(windowW/imgW);
var m = i%hNum; case_h[m].push(cases.eq(i).height());
var step = Math.floor(i/hNum);
cases.eq(i).css("left", (imgW + 10)*m+"px");
// console.log(step);
if(!step){
cases.eq(i).css("top", "0");
}else{
var num = 0;
for(var n = 0; n<step;n++){
num += case_h[m][n] + 20;
}
cases.eq(i).css("top", num+"px"); }
});
}
</script>
</body>
</html>
简单CSS定位瀑布流实现方法的更多相关文章
- thinkPHP实现瀑布流的方法
thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃ 过期已备案域名,注册就能用!终 ...
- css布局-瀑布流的实现
一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...
- 分别用js和css实现瀑布流
下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到 column-count分列 column-width固 ...
- 详解纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- 纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- CSS001. 纯CSS实现瀑布流(纵向排序)
通过 Multi-columns 相关的属性 column-count.column-gap 配合 break-inside 来实现瀑布流布局. 首先对包裹图片的盒子增加样式,column-count ...
- 用label实现横向瀑布流的方法
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAKxCAIAAAAn+3udAAAKqWlDQ1BJQ0MgUHJvZmlsZQAASImVlg
- 通过css 实现“瀑布流”
.hot_list{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap:7px; -webk ...
- css实现瀑布流
<style> .container{ column-width:250px; -webkit-column-width:250px; ...
随机推荐
- linux系统中中断已连接的用户
1.用w命令查看当前系统登录的用户 [root@rhel7 ~]# w :: up :, users, load average: 0.00, 0.01, 0.05 USER TTY FROM LOG ...
- 【网络流#8】POJ 3469 Dual Core CPU 最小割【ISAP模板】 - 《挑战程序设计竞赛》例题
[题意]有n个程序,分别在两个内核中运行,程序i在内核A上运行代价为ai,在内核B上运行的代价为bi,现在有程序间数据交换,如果两个程序在同一核上运行,则不产生额外代价,在不同核上运行则产生Cij的额 ...
- (转)html5 Placeholder属性兼容IE6、7方法
使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...
- GUID的广泛使用
GUID(Global unique identifier)全局唯一标识符,它是由网卡上的标识数字(每个网卡都有唯一的标识号)以及 CPU 时钟的唯一数字生成的的一个 16 字节的二进制值. GUID ...
- sql sever 随机查询
Select * From TableName Order By NewID() NewID()函数将创建一个 uniqueidentifier 类型的唯一值.上面的语句实现效果是从Table中随 ...
- C#将图片字节流转为Base64直接放入html的img标签src属性中
1,图片要转为byte[], 2,注意加上“data:image/jpeg;base64,”,这里jpeg可以换成其他. string html = "<img src='data:i ...
- 纪录一个table元素里面的tr th td
<table border="1"> <tr> <th>name</th> <th>sex</th> < ...
- linux 防火墙--firewalld学习
firewalld是centos7默认的防火墙,相比于iptables重要的优势: 1 支持动态更新: 2 不用重启服务: 同时增加了防火墙的“zone”概念,具体差异没做过多了解,这篇文章只记录fi ...
- java Socket 长连接 心跳包 客户端 信息收发 demo
今天写了个socket的测试小程序,代码如下 import java.io.IOException; import java.io.InputStream; import java.io.Output ...
- wamp目录索引图片不显示
在wampserver安装目录下 \bin\apache\Apache2.2.21\conf\extra\httpd-autoindex.conf Alias /icons/ "c:/Ap ...