Maison > Article > interface Web > Code d'implémentation simple pour positionner le flux en cascade à l'aide de CSS
Code d'implémentation simple pour positionner le flux en cascade à l'aide de CSS
- 高洛峰original
- 2017-03-16 10:27:471753parcourir
Cet article présente le code d'implémentation simple de l'utilisation du Positionnement CSSflux en cascade
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la propriété d'arrière-plan de CSSArticle suivant：Explication détaillée de la propriété d'arrière-plan de CSS