jQuery学习实例：瀑布流布局

最新推荐文章于 2024-10-30 19:10:39 发布

隔壁小鲜肉

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量469

点赞数

分类专栏：学习总结文章标签：瀑布流布局 javascript

本文链接：https://blog.csdn.net/wjydd666/article/details/49643077

版权

本文介绍了使用jQuery实现瀑布流布局的方法，对比了jQuery与CSS3实现的优缺点。jQuery代码简化了JavaScript实现，并通过分析图片定位和加载功能来阐述其工作原理。CSS3则利用多列属性实现，但存在浏览器兼容性和图片顺序问题。

摘要由CSDN通过智能技术生成

瀑布流效果已经成为展示类型网站的首选，所以有必要掌握其实现过程。实现这个效果目前有三种方法，分别为：JavaScript原生方法、jQuery方法、CSS3多栏布局。

一、其中JavaScript方法就不多总结了，JQuery方法可以大大简洁JavaScript代码量。直接上jQuery代码

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    article {
        position: relative;
        margin: auto 40px;
        width: 100%;
    }
    
    article .box {
        position: relative;
        float: left;
    }
    
    article .box .content {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    
    article .box .content img {
        width: 280px;
        height: auto;
    }
    </style>
</head>

<body>
    <article>
        <div class="box">
            <div class="content">
                <img src="images/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="images/7.jpg">
            </div>
        <