第一步编写HTML

第二步 JS代码准备工作

第三步创建li元素

首页

web前端

html教程

瀑布流!而且还是响应式的哦!_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:17 AM

Untitled.gif

没错!这就是瀑布流!是不是很酷炫!看似很难实现,实则很简单!我是用li标签创建这些小块块,当然你也可以根据你的需要在li标签里,插入图片或者其他.下面我们就学习一下,如何实现网页的响应式瀑布流!

第一步编写HTML

可能会有小伙伴认为我们有20个块,需要写20个标签,那你就错了,在JS代码中我们可以利用for循环在HTML中查入10个.100个.1000个你想有多少就有多少!当然你最好提前为你的瀑布流做好css样式,我的这些小块都是由li标签创建的,这样在JS中创造的li标签直接赋予相应的类名.

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            * {                margin: 0;                padding: 0;            }            #flow {                list-style: none;                margin: 0 auto;                position: relative;            }            #flow li {                position: absolute;                background-color: #CCCCCC;                font-size: 50px;                width: 200px;                transition: all 0.5s;            }        </style>    </head>    <body>        <ul id="flow">            <!--<li>1</li>-->        </ul>    </body>

登录后复制

第二步 JS代码准备工作

这步中我们需要创建一个随机数,其函数的返回值我们用来定义每一个li元素的高度,当然如果你不想随机定义高度,那你就去写个数组吧!因为我的整体布局距离左边有10px距离,所以此处创建了一个leftSpace变量接受了一下.细心朋友可能已经发现了我的每一个元素期间都有10px的间距,所以此处创建了一个paddingSpace变量来限定每个li元素的间距.其他的在代码中都有相应的注释,自行理解!

<script type="text/javascript">        function ranH (min,max) {            return parseInt(Math.random()*(max-min+1))+min;        }        var flow = document.getElementById("flow");        // 左边距        var leftSpace = 10;        // 间距        var paddingSpace = 10;        //高度数组 保存每个li的高度        var hs = [];

登录后复制

第三步创建li元素

由于在这步代码中,我们会看到出现bol值,而我们是在第四步定义了bol的值,并且根据bol的值来确定layout函数是实现创建li,还是更新li的位置.在这步我们可以先认为bol为true.首先,是创建li标签,然后获取屏幕的宽度根据屏幕的宽度设置一行有几个li标签,再根据li的标签的个数定义ul的宽度.在定义一下每列的li元素的高度,此处的作用是为了第四步的选出最短列而做准备.在给予每个li标签HTML内容,并且保存每个li的高度.

        //布局函数        //bol为真时 创建li        //bol为假时 更新li位置        function layout (bol) {            //获取所有的li 用于大小改变时 更新布局            var lis = document.getElementsByTagName("li");            var cols = parseInt(document.documentElement.clientWidth/200);                //ul宽度 跟随宽度一起变化            flow.style.width = cols*200 + 10*(cols-1)+20;            //初始化列高数组            var arrH =[];            for (var i = 0; i < cols; i++) {                arrH[i]=10;            }            function createLi (index) {                //获取已有的li或者新建                var li = lis[index]||document.createElement("li");                li.innerHTML = index;                //从数组中获取高度或者随机高度                var h = hs[index]||ranH(100,300);                li.style.height = h+"px";                if (bol) {                    hs.push(h);                }

登录后复制

第四步插入创建好的带有内容li标签.并且与第三步呼应,实现响应式瀑布流.

首先求出最短列,将li元素插入最短列下,定义每一个li的位置.在最后利用系统的window.onresize 函数,当屏幕尺寸改变时执行layout()方法中,更新li位置的方法,以实现响应式瀑布流!

//求最短列                var minH = arrH[0];                var minI = 0;                for (var i = 0; i < cols; i++) {                    if (minH>arrH[i]) {                        minH=arrH[i];                        minI=i;                    }                }                //设置left                var  l = leftSpace+(200+paddingSpace)*minI;                li.style.left = l+"px";                //设置top                li.style.top = arrH[minI]+"px";                //添加                bol&&flow.appendChild(li);//                alert(li.offsetLeft+"~"+li.offsetTop+"~"+li.offsetWidth+"~"+li.offsetHeight);                //更新高度                arrH[minI] = arrH[minI] + li.offsetHeight +paddingSpace;            }            for (var i =0 ; i < 20 ;i++) {                createLi(i);            }        }        //创建        layout(true);        window.onresize =function  () {            //更新            layout(false);        }    </script></html>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1277

C# 教程

1257

显示更多

Related knowledge

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML与CSS和JavaScript：比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML：是编程语言还是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。