jquery实现简单瀑布流

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

  在这里我采用了我认为简单的方法实现它,可能还有很多问题,希望大家能积极指正,谢谢~ 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++;
                    }
                });
});
复制代码

 

 

 

posted @   tattoos  阅读(332)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示