javascript实现瀑布流自适应遇到的问题及解决方案
作者：hebedich 发布时间：2024-04-16 10:35:23
标签：javascript,瀑布流,自适应
这几天看了Amy老师的用javascript实现瀑布流，我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕，以后改变窗口大小就不能做到自适应了。
于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的，
window.onload=function(){
//瀑布流函数
waterfall('content','box');
//模拟数据加载
var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}
//当屏幕大小改变时从新执行瀑布流函数 达到从新适应的作用
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var oparent = document.getElementById('content');
//将熏染的数据添加入html中
for(var i=0;i<dataInt.data.length;i++){
var obox = document.createElement("div");
obox.className = "box";
oparent.appendChild(obox);
var opic = document.createElement("div");
opic.className = "pic";
obox.appendChild(opic);
var oImg = document.createElement("img");
oImg.src="img/"+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('content','box');
}
}
}
当屏幕缩小时是可以的，但是从缩小的放大就出现了BUG
看没看到后面几列的顶部回不来了，
于是我打开开发工具看是怎么回事，
第3 4 5个div中不应该有style,是因为缩小的时候给他添加上去的，而放大了他没有清除所以保留下来了就会出现这个样子于是：我在瀑布流函数里加了句aBox[i].style.cssText ='';使得每次进来都清空style
function waterfall(parent,box){
//将content下所有class box取出来
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//获取盒子的宽度
var aBoxW = aBox[0].offsetWidth;
//用浏览器的可是宽度除以box宽度 得到列数
var cols = Math.floor(document.documentElement.clientWidth/aBoxW);
//设定 content的宽度 和居中
aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';
//创建每一列的高度数组
var hArr=[];
for(var i=0; i<aBox.length;i++){
aBox[i].style.cssText ='';
if(i<cols){
hArr.push(aBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH); //找出高最矮的 索引值
//console.log(aBoxW);
aBox[i].style.position = 'absolute';
aBox[i].style.top = minH+'px';
aBox[i].style.left = aBoxW*index+'px';
hArr[index]+=aBox[i].offsetHeight;
}
}
}
这样就解决了缩小后回不来的BUG，可以正常自适应了
最后我把整个的javascript 贴出来
window.onload=function(){
//瀑布流函数
waterfall('content','box');
//模拟数据加载
var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}
//当屏幕大小改变时从新执行瀑布流函数 达到从新适应的作用
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var oparent = document.getElementById('content');
//将熏染的数据添加入html中
for(var i=0;i<dataInt.data.length;i++){
var obox = document.createElement("div");
obox.className = "box";
oparent.appendChild(obox);
var opic = document.createElement("div");
opic.className = "pic";
obox.appendChild(opic);
var oImg = document.createElement("img");
oImg.src="img/"+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('content','box');
}
}
}
function waterfall(parent,box){
//将content下所有class box取出来
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//获取盒子的宽度
var aBoxW = aBox[0].offsetWidth;
//用浏览器的可是宽度除以box宽度 得到列数
var cols = Math.floor(document.documentElement.clientWidth/aBoxW);
//设定 content的宽度 和居中
aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';
//创建每一列的高度数组
var hArr=[];
for(var i=0; i<aBox.length;i++){
aBox[i].style.cssText ='';
if(i<cols){
hArr.push(aBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH); //找出高最矮的 索引值
//console.log(aBoxW);
aBox[i].style.position = 'absolute';
aBox[i].style.top = minH+'px';
aBox[i].style.left = aBoxW*index+'px';
hArr[index]+=aBox[i].offsetHeight;
}
}
}
//根据class获取到元素
function getBclass(parent,className){
var boxarr = new Array(); //用来存储获取到的class
//console.log(parent.prototype);
allElement=parent.getElementsByTagName('*');
for(var i=0;i<allElement.length;i++){
if(allElement[i].className == className){
boxarr.push(allElement[i]);
}
}
return boxarr;
}
//找出高最矮的 索引值
function getMinIndex(arr,value){
for(var i in arr){
if (arr[i]==value){
return i;
}
}
}
//建立一个检测轮轮滑动是否成立的函数 返回真假
function checkScroll(){
var oparent = document.getElementById("content");
var oBox = getBclass(oparent,'box');
var lastoBoxTop = oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);
//console.log(lastoBoxTop);
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
//console.log(scrollTop);
return(lastoBoxTop<scrollTop+height)?true:false;
}
css文件贴出来
*{margin: 0;padding: 0;}
body{background-color: #eee;}
.content{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #CCCCCC;
border-radius: 5px;
background: #fff;
}
.pic img{
width: 220px;
height: auto;
border: 1px solid #eee;
}
html文件贴出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/pubuli.css"/>
<script type="text/javascript" src="js/my.js" ></script>
</head>
<body>
<div id="content">
<div class="box">
<div class="pic">
<img src="img/01.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/02.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/03.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/04.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/05.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/06.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/07.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/08.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/09.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
好了谢谢大家观看，以前没写过技术分享类文章，有很多不周到的地方希望大家能多多指正。学习前端的小菜鸟敬上Y(^_^)Y
0
投稿猜你喜欢
1、基础概念什么是网络编程？指在网络环境中，如何实现不在同一物理位置中的计算机之间进行数据通信如果要保证数据通信顺利完成，则需要先了解如下几- 一、运算符算术运算符：+ - * / 可以在select 语句中使用连接运算符：|| select deptno|| dname from
- 1、算术运算符：+、-、*、/、％。2、递增／递减运算符：如$a++,$a--,++$a,--$a.如：<?php$a=10;$b=5
- 1 递归函数的特点特点一个函数 内部 调用自己函数内部可以调用其他函数，当然在函数内部也可以调用自己代码特点函数内部的 代码 是相同的，只是
- 当需要存储很多同类型的不通过数据时可能需要使用到嵌套，先用一个例子说明嵌套的使用1、在列表中存储字典#假设年级里有一群国际化的学生，有黄皮肤
- Python中的切片知识.在Python中，切片(slice)是对序列型对象(如list, string, tuple)的一种高级索引方法。
- 前言大家做开发的应该都知道，在开发程序中很重要的一点是测试，我们如何保证代码的质量，如何保证每个函数是可运行，运行结果是正确的，又如何保证写
- Supervisor 是基于 Python 的进程管理工具，只能运行在 Unix-Like 的系统上，也就是无法运行在 Windows 上。
- 一、问题描述 SQL Plus WorkSheet是一个窗口图形界面的SQL语句编辑器，对于那些喜欢窗口界面而不喜欢字符界面的用户，该工具相
- MySQL中涉及的几个字符集 character-set-server/default-character-set：服务器字符集，默认情况下
- 1 捕捉一个异常捕捉一个异常 以用0作为除数会得到ZeroDivisionError异常为例，print(1/0)为例程序的持续执行，不因该
- import 认识go的import有两种形式第一种是GOPATH下项目文件管理第二种是Go Modules初学状态我用的vscode.在两
- 问题简述在 Windows 系统上，我使用 Python 3.11 的 pip 工具安装 lxml 等库时会出现以下报错:error: Mi
- 使用触发器触发器发生什么事情之后或之前，会自动执行某条语句，这就是触发器创建触发器创建触发器要给出的4条关键信息：1.唯一的触发器名2.触发
- 一.问题描述当我们在做项目的时候，创建一张用户表，如何让该表的主键id从0开始自增？网上搜索了很多解决方案，最后发现了一种方法必实现且有效的
- 我就把我学习Createjs的一些心得体会向大家分享下：一.什么是CreateJS?createjs是一个轻量级的javascript库，是
- 前言目前在做vue的项目，用到了子组件依赖其父组件的数据，进行子组件的相关请求和页面数据展示，父组件渲染需要子组件通知更新父组件的state
- SQL语句更改表所有者SQL语句更改表所有者单个修改所有者sql语句如下：查询分析器输入:EXEC sp_changeobject
- 前言最近在公司售前售后同事遇到一些奇怪的需求找到我，需要提供公司一些项目数据库所有表的结构信息（字段名、类型、长度、是否主键、***、备注）
- 有没有办法更快一点？ 有没有办法一次性收缩所有数据库？ 代码如下:alter database 数据库名 set recovery simp
