自适应之瀑布流

客官°小女子只卖身不卖艺 2022-05-28 00:23 189阅读 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 条评论，189人围观）

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

相关阅读

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

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

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

相关 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 赞/ 213 阅读

相关 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 阅读

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

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

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

相关自动适应瀑布流

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

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

相关瀑布流

什么是瀑布流? 演示效果点[这里][Link 1]。瀑布流呢,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪

今天药忘吃喽~/ 2022年03月24日 21:16/ 0 赞/ 325 阅读

相关瀑布流

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

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

相关自定义ajax实现瀑布流

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

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