自适应之瀑布流

客官°小女子只卖身不卖艺 2022-05-28 00:23 217阅读 0赞

利用jquery 插件能够自适应的瀑布流

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> .container-fluid { padding: 20px; } .box { margin-bottom: 20px; float: left; width: 220px; } .box img { max-width: 100% } </style>
    </head>
    <body>
    <div id="masonry" class="container-fluid">
        <div class="box"><img src="1.jpg"></div>
        <div class="box"><img src="2.jpg"></div>
        <div class="box"><img src="3.jpg"></div>
        <div class="box"><img src="4.jpg"></div>
        <div class="box"><img src="5.jpg"></div>
        <div class="box"><img src="6.jpg"></div>
        <div class="box"><img src="7.jpg"></div>
        <div class="box"><img src="8.jpg"></div>
        <div class="box"><img src="9.jpg"></div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>
    <script> $(function() { var $container = $('#masonry'); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', gutter: 20, isAnimated: true, }); }); }); </script>
    </body>
    </html>

[jq瀑布流][jq]

[jq]: http://www.jq22.com/jquery-info362

发表评论取消回复

表情：

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

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

相关阅读

相关自适应限流

pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apa

桃扇骨/ 2023年06月17日 06:57/ 0 赞/ 21 阅读

相关 Django 之瀑布流实现

需求分析现在是 "图片为王"的时代，在浏览一些网站时，经常会看到类似于这种满屏都是图片。图片大小不一，却按空间排列，就这是瀑布流布局。 ![20190305111722.

痛定思痛。/ 2023年06月02日 10:54/ 0 赞/ 12 阅读

相关 Sentinel（十）之系统自适应限流

转载自 [系统自适应限流][Link 1] Sentinel 系统自适应限流从整体维度对应用入口流量进行控制，结合应用的 Load、CPU 使用率、总体平均 RT、入口 Q

迈不过友情╰/ 2023年01月08日 05:29/ 0 赞/ 274 阅读

相关 JQUERY之瀑布流

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

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

相关 JQUERY之瀑布流

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

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

相关 RecyclerView之瀑布流

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

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

相关自适应之瀑布流

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

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

相关视频流（自适应算法）

读 2018年IEEE/ACM TON论文 LBP:Robust Rate Adaptation Algorithm for SVC Video Streaming T

谁借莪１个温暖的怀抱￠/ 2022年04月24日 06:58/ 0 赞/ 931 阅读

相关自动适应瀑布流

<!doctype html> <html> <head> <meta charset="utf-8"> <title>自动适应瀑布流</title> <s

短命女/ 2022年04月22日 05:34/ 0 赞/ 214 阅读

相关自定义ajax实现瀑布流

前台: <!DOCTYPE html> <html> <head > <meta charset='utf-8'/> <title

清疚/ 2021年07月24日 22:50/ 0 赞/ 408 阅读