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> 
HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AMWebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AMHTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.
HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AMHTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PMHTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AMHTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AManexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
드림위버 CS6
시각적 웹 개발 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
