iOS转前端之JS实现瀑布流效果

最新推荐文章于 2022-09-06 16:18:57 发布
最新推荐文章于 2022-09-06 16:18:57 发布
阅读量1k 收藏
点赞数
分类专栏： iOS开发如何完美转前端开发 文章标签： js瀑布流 瀑布流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmh007/article/details/77891701
版权

今天抽空再写一篇，写个瀑布流的效果。做过iOS的都知道瀑布流在iOS中也是个很流行的布局方式，这里就不再多介绍了。我们来看看如何用JS来实现瀑布流的效果。

我就直接上代码了，里面的注释都很清晰。不懂的可以来问我。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--父标签-->
    <div id="main">
        <div class="box">
            <div class="pit">
                <img src="images/0.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/11.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/12.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/13.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/14.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/15.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/16.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/17.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/18.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/19.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/20.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/21.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/22.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/23.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/24.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/25.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/26.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pit">
                <img src="images/27.jpg">
            </div>
        </div>
    </div>

    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>

CSS： 

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

#main {
    position: relative;
}

#main .box {
    padding: 15px 0 0 15px;
    float: left;
}

#main .box .pit {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 2px gray;
    width: 165px;
}

#main .box .pit img {
    width: 165px;
}

JS： 

/**
 * Created by huminghao on 2017/7/5.
 */
function $(id) {
    return typeof id === 'string' ? document.getElementById(id) : id;
}

// 当页面加载完毕
window.onload = function () {
    // 实现瀑布流
    waterFlow('main', 'box');

    // 监听页面的滚动
    window.onscroll = function () {
        // 判断是否具备加载图片的条件
        if (checkWillLoadImg()) {
            // 造数据
            var dataImg = {'data' : [{'src' : '0.jpg'}, {'src' : '1.jpg'},{'src' : '2.jpg'},{'src' : '3.jpg'},{'src' : '4.jpg'},{'src' : '5.jpg'},{'src' : '6.jpg'},{'src' : '7.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'}]}

            for (var i = 0; i < dataImg.data; i ++) {
                // 创建最外层的盒子
                var newBox = document.createElement('div');
                newBox.className = 'box';
                $('main').appendChild(newBox);

                // 创建里面的盒子
                var newPic = document.createElement('div');
                newPic.className = 'pic';
                newBox.appendChild(newPic);

                // 创建图片
                var newImg = document.createElement('img');
                newImg.src = 'images/' + dataImg.data[i].src;
                newPic.appendChild(newImg);
            }
        }
    }

}


// 实现瀑布流
function waterFlow(parent, box) {
    // 让所有盒子的父标签居中
    // 1.拿到所有的盒子
    var allBoxs = $(parent).getElementsByClassName(box);

    // 2.拿到其中一个盒子的宽度
    var boxWidth = allBoxs[0].offsetWidth;

    // 3.求出页面的宽度
    var screenWidth = document.body.clientWidth;

    // 4.求出列数
    var clos = Math.floor(screenWidth / boxWidth);

    // 5.让父标签居中
    $(parent).style.cssText = 'width: ' + clos * boxWidth + 'px; margin: 0 auto';


    // 定位
    // 定义一个高度数组
    var heightArray = [];

    // 遍历
    for (var i = 0; i < allBoxs.length; i ++) {
        // 求出所有盒子的高度
        var boxHeight = allBoxs[i].offsetHeight;

        if (i<clos) { // 第一行
            heightArray.push(boxHeight);

            console.log(heightArray);
        }else { // 剩余行
            // 取出最矮盒子
            var minBoxHeight = Math.min.apply(null, heightArray);
            // 取出最矮盒子对应的索引
            var minBoxIndex = getMinIndex(minBoxHeight, heightArray);
            // 对剩余的盒子进行定位
            allBoxs[i].style.position = 'absolute';
            allBoxs[i].style.top = minBoxHeight + 'px';
            allBoxs[i].style.left = minBoxIndex * boxWidth + 'px';

            // 替换高度
            heightArray[minBoxIndex] = minBoxHeight + boxHeight;
        }
    }
}


// 求出最矮盒子在数组中的索引
function getMinIndex(value, array) {
    for (var i = 0; i < array.length; i ++) {
        if (value == array[i]) {
            return i;
        }
    }
}

// 判断是否具备加载图片的条件
function checkWillLoadImg() {
    // 拿到所有的盒子
    var allBoxs = $('main').getElementsByClassName('box');

    // 取出最后一个盒子
    var lastBox = allBoxs[allBoxs.length - 1];

    // 求出最后一个盒子高度的一半 + 头部偏移的位置
    var lastBoxHeightDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 求出屏幕的高度
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;

    // 求出页面偏离浏览器的高度
    var offSetTop = document.body.offsetTop || document.documentElement.offsetTop;
    console.log(lastBoxHeightDis, screenHeight, offSetTop);

    return lastBoxHeightDis < (offSetTop + screenHeight) ? true : false;
}

最后的效果大家可以去我的github下载查看：https://github.com/kiddhmh/HTML-Demo


kidd风
关注
专栏目录
教你如何实现一个完美的移动端瀑布流组件（附源码）
大转转FE
04-14 2610
背景瀑布流是大家日常开发过程中经常遇到的一个场景，我们公司内部的组件库中也提供了一些解决方案。但这些方案适用场景都很单一，且每个实现方案都或多或少存在一些问题，基于此，我们设计与开发了一个兼容多场景的瀑布流组件。目前转转展示商品流时会采用三种布局方式：分别是卡片流、固定式瀑布流、交错式瀑布流。其中卡片流以一个下拉列表的形式呈现。这种布局可以让用户专注于单个列表项，有利于阅...
基于Node.js、Express、MySQL的瀑布流效果.zip
最新发布
02-19
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
自己总结的html+css试题
热门推荐
baisixue19870221的博客
10-23 1万+
1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。 （3）在混杂模式中，页面以宽松的向后兼容的方式显...
深入研究-webkit-overflow-scrolling:touch及ios滚动 overflow-y: scroll;
weixin_30731287的博客
06-28 361
在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移...
代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）...
weixin_30657541的博客
10-14 240
代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器） 代码: 两列图片瀑布流（一次后台取数据，无ajax，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器） 【思路】： 图片瀑布流，网上代码有多种实现方式，也有各类插件。没找到合意的，所以根...
图片横向等高瀑布流，每行占满，限制行数 的实现
weixin_33895695的博客
12-02 449
图片的横向瀑布流，其实简单地按顺序排列就可以了 但要实现每行中各图片都等高（各行不一定等高，但每行里面等高），且每行都占满，就需要用到flex的特性了 控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度，需要按比例来动态计算 另外，如要限制图片展示的行数，则只需判断好每行总高度与容器总高度的关系即可 这里就来实现一下这个小功能 点我预览     因为都是假...
104道 CSS 面试题，助你查漏补缺
前端开发博客
10-16 7176
作者：CavsZhouyouhttps://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css...
玩转Masonry JS库来实现瀑布流Web效果
栾砚强的专栏
02-18 4315
工作项目中需要制作个Mobile上的Web App的展示，方便快捷访问和评价反馈。在展示页面能看到应用展示图，点击进入Web应用。我不是前端开发者，对HTML, CSS, JS这三剑客仅仅是略知一二。于是先规划了个简单的设计，感觉瀑布流的图片展示方式比较美观，同时布局的高度也一定灵活性。就按照Pinterest Android/IOS和花瓣Mobile Web App的目标开始实现。 第
vue实现商品列表瀑布流（上拉加载）
yintao1989的博客
09-05 2129
vue实现商品列表瀑布流（上拉加载）
uniapp简单计算实现瀑布流原来这么容易（无数据加载问题）
m0_61384071的博客
09-06 453
一个没有数据加载问题的瀑布流写法
React Native 瀑布流列表
07-05
React Native 瀑布流列表是一种流行的前端技术，它允许开发者构建动态、响应式的界面，以展示内容，尤其是图片和媒体元素，以类似瀑布或下落石头的方式排列。这种布局方式在电商、摄影或者社交媒体应用中非常常见，...
iOS转前端之如何适配不同屏幕尺寸方案
kidd风的博客
07-27 4469
今天抽空再写一篇~之前已经做了两个Demo，主要是运用CSS+Html完成的，今天还是来完成一个Demo，搭建一个关于宠物的网站。在开始之前我们先介绍一个知识点，关于适配的。 其实对于学习前端来说，H5手机适配也是一个老生常谈的问题了，当然网上也有大牛给了解决方案，这里我就结合自己的实际情况分析一下这个适配问题。 基础: 1.viewport 这是加在之间的，用来缩
iOS转前端之盒子模型以及居中问题
kidd风的博客
07-07 1673
OK。第三篇来了，今天来聊聊CSS布局中的盒子模型和居中问题。好了，直接开始吧~ 前面介绍了一些HTML和CSS的基础知识，今天来说说CSS中的盒子模型和布局居中问题，这都是平时开发中经常遇到的问题。 盒子模型 ---网页上的每一个标签都是一个盒子，每个盒子都有四个属性。 内容（content） 盒子里装的东西，网页中通常是指文字和图片。
iOS转前端之仿写百度首页
kidd风的博客
07-12 1551
抱歉，这几天有点忙，部门开季度大会。。。今天来继续填坑。 前三篇我们已经介绍了HTML、CSS的一些知识，相信大家已经迫不及待想实际运用一下了。OK，今天我们来写一个Demo，模仿百度首页写一个静态的页面，后面学了JS，还可以加一些动态的东西。话不多说，上代码。 首先我们打开WebStorm，新建一个工程，先创建一个index.html文件，作为主文件： 然后需要用到
iOS转前端之JS基本语法总结
kidd风的博客
08-11 1399
这段时间一直忙着写需求，没啥时间来写博客，今天抽个空更新一篇博客~ 这一篇我们来总结下JavaScript的基本语法。话不多说，开始吧。 首先，我们来看下js中的基本数据类型有哪几种？ var age = 18; //number var name = 'jack'; //string var result = true; //boolean false v
iOS转前端之仿写登录页面
kidd风的博客
07-18 1317
今天还是来仿写一个常用的登录界面，巩固一下之前掌握的知识。 同样的我们还是先构建一个项目，创建对应的css文件和html文件，then begin code~ 首先是html： 欢迎登录 欢迎登录CSDN官网
iOS转前端之CSS基础学习
kidd风的博客
07-06 937
写在开头： 目前保持一天一篇的节奏，虽然前面的知识比较简单，大多数可能比较枯燥，不会的可以百度，但是一些常用的一定要记住，这对后面的实战很重要。基础一定要打扎实。OK，进入第二篇CSS的基础学习吧。 什么是CSS？ CSS的全称是CascadingStyle Sheets，层叠样式表。它是用来控制HTML标签的样式，在美化网页中起到非常重要的作用。 CSS的编写
iOS转前端之JS进阶技巧及Demo演示
kidd风的博客
08-30 936
今天抽个空把JS剩下的一些操作介绍下，当然不可能介绍的很全面，大部分是我认为很重要的部分，还有很多事在实际工作会遇到的，再去查资料，不断完善知识体系。 首先，我们来看下JS中的内置对象 一、Window 这里可不是iOS中的Window对象，在JS中，Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 wind
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值