JQUERY之瀑布流

傷城~ 2022-07-12 02:25 213阅读 0赞

准备如下：  
去jquery官网下载jquery.js。

效果如下：

![20170207165711414][]

<!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" />
    <style>
    #box{ width:1000px; min-height:800px; border:#333 1px solid; padding:10px; margin:0 auto;}
    .box{ width:180px; min-height:180px; border-radius:8px; border:4px solid #ccc; margin:0 10px 10px 0;}
    </style>
    <title>jquery的瀑布流</title>
    <script src="jquery.js" type="text/javascript" language="javascript"></script>
    <script src="http://masonry.desandro.com/jquery.masonry.min.js" type="text/javascript" language="javascript"></script>
    <script language="javascript">
    $(document).ready(function(e) {
    	$('#box').masonry({
          itemSelector: '.box',
          columnWidth: 100,
          isAnimated: true
        });
    });
    </script>
    </head>
    <body>
    <div id="box">
    <div class="box">111<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">222<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">333<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">444<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">555<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">666<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">777<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">888<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="box">999</div>
    </div>
    </body>
    </html>

[20170207165711414]: /images/20220711/994bd65f492b405c8adb28e12c0d38fe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery动态加载瀑布流

jquery实现瀑布流案例分析首先，它的每个图片是等宽的其次，除第一排正常显示其余的图片都会显示在上一排中高度最小的那个图片的下面最后，就

深碍√TFBOYSˉ_/ 2022年12月02日 10:53/ 0 赞/ 270 阅读

相关 JQUERY之瀑布流

准备如下：去jquery官网下载jquery.js。效果如下： ![20170207165711414][] <!DOCTYPE html P

矫情吗；*/ 2022年07月12日 02:25/ 0 赞/ 186 阅读

相关 JQUERY之瀑布流

准备如下：去jquery官网下载jquery.js。效果如下： ![20170207165711414][] <!DOCTYPE html P

傷城~/ 2022年07月12日 02:25/ 0 赞/ 214 阅读

相关 RecyclerView之瀑布流

![Center][] ![Center 1][] Fruit.Class FruitAdapter.Class activity\_main.Xml和地址里的

ゝ一纸荒年。/ 2022年06月17日 09:49/ 0 赞/ 197 阅读

相关自适应之瀑布流

利用jquery 插件能够自适应的瀑布流 <!doctype html> <html lang="en"> <head> <meta

客官°小女子只卖身不卖艺/ 2022年05月28日 00:23/ 0 赞/ 190 阅读

相关 jquery瀑布流布局

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery瀑布流布局</title>

柔光的暖阳◎/ 2022年04月22日 05:34/ 0 赞/ 313 阅读

相关瀑布流

瀑布流经过几经波折终于完成，完了就总结一下，可以帮助更多的人。（具体瀑布流布局，可百度jquery-masonry.js） 1>>首先就是一个窗口的滚动条是否接近页面底部的一

你的名字/ 2022年03月20日 03:40/ 0 赞/ 325 阅读

相关 jQuery图片瀑布流

> 很早之前就听说过瀑布流布局，瀑布流布局能够降低页面的复杂度，对用户也比较友好，但它也有局限，对于一些页面差异比较大的页面或内如不是一种很好的选择。推荐大家看一下瀑布流鼻

た入场券/ 2022年03月16日 08:24/ 0 赞/ 332 阅读

相关网页瀑布流布局jQuery实现代码

这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下什么是瀑布流网页布局？ ![2016102110524

ゝ一纸荒年。/ 2022年01月05日 05:51/ 0 赞/ 296 阅读

相关 PHP JQUERY JSON 实现瀑布流

jquert.html 页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

╰+攻爆jí腚メ/ 2021年12月23日 12:07/ 0 赞/ 239 阅读