为什么jQurey没有实现居中显示啊?

来源:3-1 jQuery实现瀑布流布局图片定位

Python程序猿

2016-05-04 08:41

<!DOCTYPE html>

<html>

<head>

<title>瀑布流布局</title>

<meta charsett="utf-8">

<link rel="stylesheet" type="text/css" href="style.css"/>

<script type="text/javascript" src="jquery 1.12.2.js"></script>

<script type="text/javascript" src="script.js"></script>

</head>


<body>

<div id="main">

<div class="box">

<div class="pic">

<img src="Images/0.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/1.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/2.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/3.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/4.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/5.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/6.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/7.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/8.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/9.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/10.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/11.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/12.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/13.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/14.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/15.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/16.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/17.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/18.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/19.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/20.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/21.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/22.jpg"/>

</div>

</div>


<div class="box">

<div class="pic">

<img src="Images/23.jpg"/>

</div>

</div>

</div>

</body>

</html>

---------------------------------------------------

$(window).on('load',function(){

waterfall();

})


function waterfall(){

var $boxs=$('#main>div');

var w=$boxs.eq(0).outerWidth();

var cols=Math.floor($(window).width()/w);

$('#main').width(w*cols).css('margin','0 auto');

}

--------------------------------------------------------

写回答 关注

1回答

  • 188_整垮互联网
    2016-05-05 13:14:17

    你最好先理清楚字符,数值,函数,这些先

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题