瀑布流主要就是指数据按照瀑布方式自上而下加载，主要由于高度的不同造成的瀑布落差感（可以参考百度图片）。javascript实现图片瀑布流主要分三个步骤：
1.瀑布容器和图片属性设置（大小、边框、颜色、边距等）
2.图片加载方式
3.图片滚动加载
1.属性设置
html结构：
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
//根据需要添加N个
......
......
</div>
</body>
CSS样式：
/*图片采用统一宽度和原高度*/
.box_img img{
width: 200px;
height: auto;
}
/*其他属性自行设置*/
......
......
2.图片加载
1）得到所有要加载显示的图片
2）计算每行图片的个数，先填充屏幕第1行
3）查找第1行中最小高度的图片
4）将第1行放不下的图片加载在第1行最小高度的图片的下方，同时该高度变为两张图片的总高度
5）按照4）的方式循环加载剩余图片
window.onload = function() {
imgLoad("container", "box");
}
function imgLoad(parentBox, content) {
var parent = document.getElementById(parentBox);
var children = [];
var tempChild = parent.getElementsByTagName("*");
for(var i in tempChild) {
if(tempChild[i].className == content) {
children.push(tempChild[i]);
}
}
var imgWidth = children[0].offsetWidth;
var imgNum = Math.floor(document.documentElement.clientWidth / imgWidth);
parent.style.cssText = "width:" + imgWidth * imgNum + "px; margin:0 auto";
var imgHeightList = [];
for(var i=0;i<children.length;i++) {
if(i<imgNum) {
imgHeightList[i] = children[i].offsetHeight;
} else {
var minHeight = Math.min.apply(null, imgHeightList);
var minIndex;
for(var j in imgHeightList) {
if(imgHeightList[j] == minHeight) {
minIndex = j;
}
}
children[i].style.position = "absolute";
children[i].style.top = minHeight + "px";
children[i].style.left = children[minIndex].offsetLeft + "px";
imgHeightList[minIndex] = imgHeightList[minIndex] + children[i].offsetHeight;
}
}
}
3.滚动加载
1）鼠标滚动时判断当前屏幕高度加上滚动高度是否大于页面顶部到当前屏幕底部的高度
2）大于时获取需要滚动加载的图片资源，并循环创建图片的html结构
3）调用图片加载方式循环加载图片
var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}......]};
window.onscroll = function() {
var parent = document.getElementById("container");
var children = [];
var tempChildren = parent.getElementsByTagName("*");
for(var i in tempChildren) {
if(tempChildren[i].className == "box") {
children.push(tempChildren[i]);
}
}
var lastChildHeight = children[children.length - 1].offsetTop;
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(lastChildHeight < scrollTop + pageHeight) {
for(var i=0;i<imgData.data.length;i++) {
var child = document.createElement("div");
child.className = "box";
parent.appendChild(child);
var boxImg = document.createElement("div");
boxImg.className = "box_img";
child.appendChild(boxImg);
var img = document.createElement("img");
img.src = "img/" + imgData.data[i].src;
boxImg.appendChild(img);
}
imgLoad("container", "box");
}
}
分享到：
相关推荐
以上就是使用HTML和JavaScript实现图片瀑布流的基本步骤。通过这样的方法，你可以创建出一个动态、美观且适应不同屏幕尺寸的图片展示页面。记住，优化性能和用户体验是此类特效设计的重要考量因素。
【JavaScript实现】 实现上述功能，JavaScript需要处理以下几个关键点： 1. 计算元素大小：根据不同的屏幕尺寸和图片宽高比，计算出合适的元素宽度和高度。 2. 布局计算：当新图片加载时，调整瀑布流布局，确保元素...
JavaScript 实现图片瀑布流是一种常见的网页布局方式，它使得页面上的图片可以自适应地排列，形成类似瀑布倾泻的效果，视觉上美观且适应不同屏幕尺寸。以下是对标题和描述中涉及知识点的详细解释： 1. **创建容器...
总结来说，文章介绍了通过HTML、CSS和JavaScript实现图片瀑布流布局的方法，并简要提到了底部刷新功能。瀑布流布局的实现依赖于合理的HTML结构和CSS样式，以及JavaScript来动态地计算并调整布局。底部刷新功能则可以...
本文将深入探讨JavaScript实现图片瀑布流布局的关键技术和实践方法。 首先，我们需要理解瀑布流布局的基本概念。它是一种自适应的布局方式，图片以等宽但不等高的形式垂直排列，每一列的顶部对齐，形成一种类似瀑布...
在JavaScript中实现瀑布流布局，需要掌握以下几个关键知识点： 1. **响应式设计**：瀑布流布局需要适应不同的屏幕尺寸和分辨率，因此需要使用响应式设计，如媒体查询（Media Queries）来调整布局以适应不同设备。 ...
总的来说，这个压缩包提供的代码示例是一个综合应用HTML5、CSS和JavaScript实现图片瀑布流和筛选功能的实例，可以帮助开发者学习和理解如何在实际项目中创建类似的交互效果。通过研究和修改这些代码，你可以定制自己...
整个瀑布流布局用到了CSS和JavaScript，首先我们将不同尺寸的图片设置成宽度一致，然后一列列地分布，同时我们还可以将图片放大浏览，这种图片的瀑布流排列方式在现代相册应用中使用十分广发，特别是移动端的显示...
综上所述，这个压缩包中的"横向瀑布流代码"很可能包含了一个使用CSS3和可能的JavaScript技巧实现的横向瀑布流布局示例。通过深入研究这些代码，你可以学习到如何在没有依赖外部库的情况下，利用现代CSS3特性构建美观...
在微信小程序中实现图片瀑布流布局，需要掌握以下几个关键知识点： 1. **WXML与WXSS**：这是微信小程序的前端结构和样式语言，类似于HTML和CSS。WXML负责构建页面结构，而WXSS则用于定义元素的样式。在创建瀑布流...
在网页开发中，jQuery库经常被用来实现图片瀑布流功能，因为其强大的DOM操作能力和丰富的插件生态系统。 jQuery图片瀑布流的实现主要依赖于两个关键概念：响应式设计和自适应布局。响应式设计意味着网页可以根据...
Vue 实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多（步骤详解） Vue.js 是一个流行的前端框架，越来越多的开发者选择使用 Vue.js 来构建复杂的 Web 应用程序。本文将详细介绍如何使用 Vue.js 实现网络图片瀑布流 +...
下面将详细讲解如何使用JavaScript实现瀑布流。 首先，我们需要一个HTML结构来承载我们的瀑布流元素。通常，每个元素会被包裹在一个div中，并通过CSS设置浮动或定位，以便于在JavaScript中进行布局计算。例如： ``...
对于"瀑布流显示美女图片图片瀑布流效果源码下载"这个项目，我们可以期待以下几个关键知识点： 1. **HTML结构**：首先，页面需要一个合适的HTML结构来承载图片。通常会使用`<div>`元素作为图片容器，并设置相应的...
通过阅读和理解这些代码，我们可以学习如何在没有第三方库的情况下，如jQuery或Modernizr，使用原生JavaScript实现瀑布流布局，并保证在IE8上的兼容性。 总的来说，实现瀑布流布局涉及JavaScript的基本语法、DOM...
在前端开发中，通过JavaScript实现瀑布流布局时，Ajax技术通常被用来异步加载更多内容，以实现无限滚动的效果。 一、Ajax技术 Ajax，全称为Asynchronous JavaScript and XML，即异步JavaScript和XML。它允许网页在...
【Bmob图片瀑布流】是一种常见的前端展示技术，它结合了Bmob后端云服务与前端瀑布流布局，用于高效地展示大量图片。在本文中，我们将深入探讨Bmob服务的使用、瀑布流布局的原理以及如何将两者结合起来实现一个功能...
总的来说，实现“图片瀑布流代码”涉及的技术点包括但不限于CSS3布局（Flexbox、Grid）、JavaScript编程、瀑布流布局算法、jQuery Masonry插件、Intersection Observer API的使用，以及图形文件的处理和优化。...