自适应瀑布流图片

最新推荐文章于 2021-09-16 21:29:56 发布
最新推荐文章于 2021-09-16 21:29:56 发布
阅读量427 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaya1286249672/article/details/53981668
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0; padding:0;}
        #container{margin:auto; position:relative;}
        .box{position:absolute;padding:5px;float:left;}
        .item{padding:5px;border:solid 1px #ccc; border-radius:5px;}
        .item>img{width:200px;height:auto;display:block;border-radius:5px;}
    </style>
</head>
<body>
    <!-- 存放所有图片的容器 -->
    <div id="container">
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            waterFlow();
        }

        window.onresize = function() {
            waterFlow();
        }

        function waterFlow(){
            var _container = document.getElementById("container");
            // 获取所有的box
            var _boxes = document.getElementsByClassName("box");
            // 计算浏览器视窗中，能放几列，同时设置容器container的宽度
            var _clientWidth = document.documentElement.clientWidth;
            var _boxWidth = _boxes[0].offsetWidth;
            var _col = Math.floor(_clientWidth / _boxWidth);
            _container.style.width = _col * _boxWidth + "px";

            // 开始布局操作
            var _arrayRow = [];
            for(var i = 0; i < _boxes.length; i++) {
                if(i < _col) {// 第一行图片
                    _boxes[i].style.top = 0;
                    _boxes[i].style.left = i * _boxWidth + "px";
                    _arrayRow[i] = _boxes[i].offsetHeight;//保存高度
                    console.log(_arrayRow);
                } else {// 其他图片
                    // 获取最小高度、最小高度对应的下标
                    var _minHeight = Math.min.apply(null, _arrayRow);
                    var _minIndex = _arrayRow.indexOf(_minHeight);
                    console.log(_minHeight, _minIndex);

                    // 设置图片的定位
                    _boxes[i].style.left = _minIndex * _boxWidth + "px";
                    _boxes[i].style.top = _minHeight + "px";

                    // 更新数组的高度
                    _arrayRow[_minIndex] += _boxes[i].offsetHeight;
                }
            }
        }
    </script>
</body>
</html>
yaya1286249672
关注
自适应瀑布流
weixin_45052104的博客
06-12 290
分析： 1. 大盒子 2. 所有的子节点 3. 计算大盒子的宽度 4. 计算一个子节点的宽度 5. 计算列数 （总宽度 / 子节点的宽度) 6. 计算左右间隙（总宽度 - 列数 * 子节点的宽度） / (列数 + 1) 7. 初始化第一行所有列的位置（left / top) 难点 8. 对号入座 最小高...
瀑布流效果（图片自适应）
圣三一
02-27 3609
上学期进行了一次swift实训，组里的小姐姐们说能不能用瀑布流的效果，开始我以为和通讯录那种行表式差不多，查看xcode里面有没有支持这种效果的方法，但是找了很久没有找到。于是准备自己动手，code了一天，但是还是没有弄出来，在组里大佬的提醒下，我意识到我没有必要自己造轮子，可以用别人写好的。于是推荐了我一个很好的网站：代码库，里面有许多别人做好的案例。 于是我开始进行搜索瀑布流相关的代码，但是我...
javascript实现自适应宽度的瀑布流
weixin_33928467的博客
02-19 111
　　这样的布局并不陌生，从2011年Pinterest创立以来，中国互联网就迅速掀起了一股模仿Pinterest的热潮，国内有众多网站采用瀑布流的布局方式，例如花瓣网、美丽说等等。而事实上在中国互联网，模仿一些在国外被人看好的模式（当然，你也可以说是山寨或抄袭，呵呵！！）向来都是一个不错的idea。 　　OK，现在进入正题。这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascr...
自适应之瀑布流
小小少年
03-26 488
利用jquery 插件能够自适应的瀑布流 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user
javascript自适应宽度的瀑布流实现思路
hanliuxinming的专栏
06-18 605
这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了，ajax和json是滚动加载更多内容的时候用到的，感兴趣的你可以参考下哦
自适应瀑布流相册响应式模板
04-02
自适应瀑布流相册响应式模板是一款专为相册展示设计的HTML5网站模板，具有良好的用户界面和交互体验。该模板的特点在于其自适应性，即能够根据不同的设备屏幕尺寸，如桌面、平板和手机，自动调整布局，提供一致且...
自适应瀑布流+点击图片放大功能
06-05
在本项目中，"自适应瀑布流"意味着布局会根据用户设备的屏幕尺寸进行自动调整，确保在不同分辨率的设备上都能呈现出良好的视觉效果。 "点击图片放大功能"则是指当用户点击页面中的图片时，图片会以全屏或弹出窗口的...
自适应瀑布流baguetteBox.js画廊效果
06-01
【自适应瀑布流】是一种网页布局方式，常用于图片展示或内容排列，它能根据浏览器窗口大小自动调整列宽，使每一列保持大致相同的高度，形成瀑布般的视觉效果。这种布局方式尤其适用于需要展示大量图片的网站，如摄影...
窗口自适应瀑布流特效代码
03-20
在IT行业中，窗口自适应瀑布流特效是一种常见的网页布局技术，尤其在图片展示或商品列表等场景中广泛应用。这种特效使得网页内容能够根据浏览器窗口大小的变化自动调整布局，以达到最佳的视觉效果。下面我们将详细...
jquery自适应屏幕图片瀑布流布局代码
12-07
jquery自适应屏幕图片瀑布流布局代码
jQuery响应式自适应图片瀑布流代码.zip
07-11
js代码 [removed][removed] [removed][removed] [removed] var gallery = $('.photos').gallerify({ margin:10, mode:'default', lastRow:'adjust' }); [removed] 这是一款仿百度图片瀑布流网格布局效果的jQuery响应式自适应图片瀑布流代码，可自适应浏览器宽度。
自适应瀑布型布局（手机，PC全兼容）
10-26
自适应瀑布型布局（手机，PC全兼容），本人原创代码
waterfall自适应图片瀑布流布局无限加载代码
12-31
waterfall自适应图片瀑布流布局无限加载代码，兼容电脑、平板和手机端浏览，使用front封装渲染，cell的宽高间隙定义全局参数自行修改。
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
纯css3实现横向瀑布流布局，让图片看起来更美观。
js瀑布流，实现图片自适应显示
chengshuo3850的博客
01-28 110
waterfall.html /* *author:renault *mail:renault9335@163.com */ <!DOCTYPEhtml> <html> <head> <metahttp-equi...
Flutter自适应瀑布流
weixin_55362248的博客
09-16 996
前言：在电商app经常会看到首页商品推荐的瀑布流，或者类似短视频app首页也是瀑布流，这些都是需要自适应的，才能给用户带来好的体验 （具体代码请联系我，当天会回复） 话不多说先上效果图: 根据效果图可以分为四步： 1.图片自适应 2.自适应标签 3.上拉刷新和下拉加载 4.底部的点赞按钮可以去掉或者自己修改样式，我这里使用的like_button库 注：本文使用的库：为啥这么多呢，因为我把图片缓存这样东西都加上了，单纯的瀑布流就用waterfall_flow waterfall_
js自适应瀑布流
TB的Web
09-01 875
 自己找一些宽度一样的图片插入就可以看到效果了 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ ma
Android RecyclerView实现图片自适应高度的瀑布流
vida990717的博客
03-25 4587
项目中要实现图片自适应高度的瀑布流，咋样自适应高度呢？ 1.item的高度宽度要wrap_content 2.获得图片的高度宽度 3.onBindViewHolder中绑定数据的时候，先获取item宽度，计算图片等比例缩放后的高度，为imageView设置参数 关键代码如下： mRecyclerView = findViewById(R.id.recyclerview); mRecyclerVie...
原生实现自适应瀑布流布局技术分享
通过以上知识点的介绍，我们可以看到实现一个自适应瀑布流布局涉及到前端开发的多个方面。正确地使用HTML5、CSS3和JavaScript是创建现代Web页面的关键，而自适应布局的实现则进一步提升了Web应用的可用性和用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值