您的位置：首页 > Web前端 > JQuery

jquery实现简单瀑布流

2013-11-12 16:12 387 查看

　　瀑布流这个概念一直不是很理解，看到别人可以实现，自己弄了很久还是不能实现就很纠结。瀑布流这根刺就一直扎在我心里，一次偶然的机会看到别人实现了瀑布流，我想我是不是也应该再继续把这个未完成的任务画一个圆满符号？所以坚持加上强迫自己好好思考，这里引用了别人瀑布流的图片（ps：没有去看实现方法，那些js代码看着晕乎乎的，[b]没jquery简单，@_@）。[/b]

　　在这里我采用了我认为简单的方法实现它，可能还有很多问题，希望大家能积极指正，谢谢~ O(∩_∩)O。

一、css代码

.box-inner {
position: relative;
width: 1800px;
margin: 50px auto;
background: red;
}
.box-inner ul li {
position: absolute;
padding-bottom: 10px;
border: 2px solid gray;
text-align: center;
}

二、html代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../jquery-1.10.2.js"></script>
<link rel="stylesheet" href="../reset.css"/>
</head>
<body>
<div class="box">
<div class="box-inner">
<ul>
<li><img src="images/image_1.jpg"/><p>1</p></li>
<li><img src="images/image_2.jpg"/><p>2</p></li>
<li><img src="images/image_3.jpg"/><p>3</p></li>
<li><img src="images/image_4.jpg"/><p>4</p></li>
<li><img src="images/image_5.jpg"/><p>5</p></li>
<li><img src="images/image_6.jpg"/><p>6</p></li>
<li><img src="images/image_7.jpg"/><p>7</p></li>
<li><img src="images/image_8.jpg"/><p>8</p></li>
<li><img src="images/image_9.jpg"/><p>9</p></li>
<li><img src="images/image_10.jpg"/><p>10</p></li>
<li><img src="images/image_1.jpg"/><p>11</p></li>
<li><img src="images/image_2.jpg"/><p>12</p></li>
<li><img src="images/image_3.jpg"/><p>13</p></li>
<li><img src="images/image_4.jpg"/><p>14</p></li>
<li><img src="images/image_5.jpg"/><p>15</p></li>
<li><img src="images/image_6.jpg"/><p>16</p></li>
<li><img src="images/image_7.jpg"/><p>17</p></li>
<li><img src="images/image_8.jpg"/><p>18</p></li>
<li><img src="images/image_9.jpg"/><p>19</p></li>
<li><img src="images/image_10.jpg"/><p>20</p></li>
<li><img src="images/image_1.jpg"/><p>21</p></li>
<li><img src="images/image_2.jpg"/><p>22</p></li>
<li><img src="images/image_3.jpg"/><p>23</p></li>
<li><img src="images/image_4.jpg"/><p>24</p></li>
<li><img src="images/image_5.jpg"/><p>25</p></li>
</ul>
</div>
</div>

</body>
</html>

三、jquery代码

$(function(){
var i = 0;
var next = 0;
$(".box-inner ul li").each(function(){
var width = $(this).width();
var allWidth = width*i;/* 表示所有图片总宽度 */
if(allWidth<1800){/* 表示为第一行 */
var cssObj = {"left":allWidth};
$(this).css(cssObj);
i++;
next = i;/* 将i值赋给next，当换行时next一行总数就保持不变了 */
}else{
/* 这边获取到的next就是每行总个数 */
var height = $(".box-inner ul li").eq(i-next).height()+$(".box-inner ul li").eq(i-next).offset().top-$(".box-inner").offset().top;/* 图片上一行对应地方的高度加上它上面偏移top减去box-inner偏移高度 */
var newLineWidth = width*(i%next);/* 每一行显示宽度的形式都是一样的，i整除next的值是0,1,2,... */
var otherObj = {"left":newLineWidth,"top":height};
$(this).css(otherObj);
i++;
}
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航