Rumah >hujung hadapan web >tutorial css >使用CSS定位瀑布流简单的实现代码
使用CSS定位瀑布流简单的实现代码
- 高洛峰asal
- 2017-03-16 10:27:471759semak imbas
这篇文章介绍使用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>Atas ialah kandungan terperinci 使用CSS定位瀑布流简单的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：详解css之背景background属性Artikel seterusnya：CSS定位position使用介绍