图片瀑布展示 web开发

最新推荐文章于 2024-05-23 19:27:34 发布
最新推荐文章于 2024-05-23 19:27:34 发布
阅读量249 收藏
点赞数
分类专栏： web javascrpit jquery网页插件 文章标签： js html css web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18660259/article/details/52156812
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{padding: 0;margin: 0;}
#main{position: relative;margin: 0 auto;}
.box{padding: 15px 0 0 15px;float: left;}
.pic{padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;}
.pic img{width: 165px;height: auto;}
.imgDg{position: fixed;top: 0px;left: 0px;background: rgba(0,0,0,0.5);z-index: 9;}
.imgDiv .pic{z-index: 10;width: 500px;height: 350px;background: #FFFFFF;position: fixed;}
.imgDiv .pic img{width: 100%;height: 100%;}
.imgDiv{position: fixed;}
</style>
<body>
<div id="main">
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/cat.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/3/11.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/cat.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/3/11.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/cat.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/3/11.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/leaf.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/3/11.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/6/kele.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu02.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/leaf.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/6/kele.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/leaf.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/6/kele.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/leaf.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/6/kele.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/leaf.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/6/kele.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/10/leaf.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu01.jpg"/>
</div>
</div>
<div class='box'>
<div class='pic'>
<img src="JavaScript网页特效实例大全/JavaScript网页特效实例大全/6/kele.jpg"/>
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
waterfall('main','box');
var dataInt = {
'data':[
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'},
{'src':'JavaScript网页特效实例大全/JavaScript网页特效实例大全/5/tu03.jpg'}
]
};
window.onscroll = function(){
if(checkScrollSlide){
var oParent = document.getElementById('main')
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 = dataInt.data[i].src;
oPic.appendChild(oImg)
waterfall('main','box')
}
}
// checkScrollSlide()
}
// clickImg('main','img')
}

function checkScrollSlide(){
var oParent = document.getElementById('main');
var oBoxs = getByClass(oParent,'box');
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor((oBoxs[oBoxs.length-1].offsetTop)/2)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH<scrollTop+height)?true:false;
}

// function clickImg(d,tag){
var img = [];
// var imgParent = document.getElementById(d);
// imgTag = imgParent.getElementsByClassName('box');
// for(var i=0;i<imgTag.length;i++){
// imgTag[i].setAttribute('onclick','showImg(this)');
// }
//
// }

// function showImg(e){
// var pic = e.getElementsByClassName('pic');
// var imgDg = document.createElement('div');
// var pageW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
// var pageH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// imgDg.style.width = pageW +'px';
// imgDg.style.height = pageH +'px';
// imgDg.className = 'imgDg';
// e.className = 'box imgDiv';
// e.style.cssText = 'top:'+((pageW-500)/2)+'px;'+'left:' + ((pageW-300)/2)+'px';
// e.appendChild(imgDg);
// }

function waterfall(parent,box){
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
console.log(oBoxs);
//计算整个页面显示的列数(页面宽度/box宽度)
var oBoxW = oBoxs[0].offsetWidth;
var pageW = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var cols = Math.floor(pageW/oBoxW);
//设置main的width
oParent.style.cssText = 'width:'+cols*oBoxW+'px;margin:0 auto';
var hArr = []; //存放每一列的高度
for(var i = 0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight)
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinhIndex(hArr,minH);
oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top = minH+'px';
oBoxs[i].style.left = oBoxW*index +'px';
//oBoxs[i].style.left = oBoxs[index].offsetWidth+'px';
hArr[index] += oBoxs[i].offsetHeight; //最小加上 加上图片的高
}
}
console.log(hArr);
}

//获取多少个box
function getByClass(parent,clsName){
var boxArr = new Array(),
oElements = parent.getElementsByTagName('*');
for(var i = 0;i<oElements.length;i++){
if(oElements[i].className == clsName){
boxArr.push(oElements[i])
}
}
return boxArr
}

//计算出数组最小值的索引位置
function getMinhIndex(arr,val){
for(var i  in arr){
if(arr[i]==val){
return i
}
}
}


</script>
</html>
瓦是榴莲个哥
关注
专栏目录
html 瀑布流展示
12-10
适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。
前端页面图片瀑布流展示
09-12
前端图片展示，采用瀑布流方式，可分步加载图片。可点击加载更多来加载其余图片。
css 瀑布流布局_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？...
weixin_39870155的博客
11-29 371
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街原理图:在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。使用CSS3S实现只需要如下4步:1. 准备图片素材2. 书写相应HTML结构3. 了解CSS 多栏(Multi-column) 属性4. 使用CSS 多栏属性完成瀑布流布局一、第一步 —— 准备图片素材目标 : 准备图片素材,每张图片的宽度...
瀑布流的实现方式
涂涂
03-03 1246
1.瀑布流的实现方式 2.实现垂直方向上的居中方式 3.谈谈绝对定位和相对定位
小程序商城瀑布流商品展示实现
热门推荐
小圣贤君的博客
08-22 1万+
现在小程序商城越来越多，通常的商城中，商品展示都是那种常规的两列规则展示，但是现在越来越多的应用开始采用瀑布流的方式来展示商品，商品的图片高度不定，商品根据图片容器大小，自由排列，依次下排。 今儿，小圣贤君就为大家讲解一下，如何在小程序中实现瀑布流形式展示商品。 一般页面中商品会显示两列，通过接口拿到数据后，判断现有的两列的长短，将商品加入到列高较短的那一列中，如何判断两列的高低呢？ 其实很...
基于Vue3实现图片瀑布流排序
最新发布
weixin_44416058的博客
05-23 1867
vue3+tailwindcss实现瀑布流组件
web前端入门到实战：纯CSS瀑布流与JS瀑布流
软件开发-前端开发-IT
10-08 366
瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时...
jquery 瀑布流实例最流行瀑布流图片展示
qq_365392777
08-15 372
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 二、代码目录 三、代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
移动端web开发技巧
你的博客
05-02 1369
这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。META相关1. 添加到主屏后的标题（IOS）<meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）<meta name="ap
主要实现了使用瀑布流插件滚动图片.zip
03-24
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示，尤其是像Pinterest这样的社交网络。这种布局的特点是容器内的元素不规则地排列，如同瀑布一样自上而下流动，每列的高度根据其内容自动调整。...
jQuery图片瀑布流的简单实现代码
10-20
它通过简化HTML文档遍历、事件处理、动画和Ajax交互，使得Web开发变得更加便捷。在本例中，jQuery被用来操作DOM元素，动态调整图片的位置，实现瀑布流布局。 #### 3. 瀑布流布局的实现思路 实现瀑布流布局的关键...
HTML5图片瀑布流带筛选功能特效代码
03-20
HTML5图片瀑布流是一种流行的网页布局方式，常用于展示大量图片，如...它不仅展示了现代Web开发的先进技术，也为开发者提供了一个学习和参考的实例。对于想要提升网页设计和开发技能的人来说，这是一个有价值的资源。
瀑布流图片展示站模板.zip
10-03
瀑布流图片展示站模板是一种常见的网页设计布局方式，尤其在艺术、摄影或电子商务网站中非常流行。这种布局方式因其图像自上而下流溢的效果，形象地被比喻为瀑布，故得名“瀑布流”。本模板是专为创建此类站点而设计...
使用动态加载懒加载瀑布流布局以及LightBox实现一个图片搜索效果
08-10
在IT领域，尤其是在Web开发中，创建高效且用户体验良好的图片搜索功能是一项常见的任务。本项目通过结合动态加载（懒加载）、瀑布流布局以及LightBox技术，实现了一个出色的图片搜索效果。接下来，我们将深入探讨...
瀑布流效果展示图片的实现（小demo）
qq_43437571的博客
09-30 1044
代码展示： 首先html页面中需要先在head中引入以下文件： <link rel="stylesheet" href="flow.css"> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script src="flow.js"></script> html页面： <div class="masonry"> <di
vue结合Waterfall做图片瀑布流展示
swagLi的博客
07-23 2067
一、安装Waterfall npm install vue-waterfall-plugin -s 二、在组件中引入并使用 <template> <div> <Waterfall ref="waterfall" :list="lotList" :gutter="13" backgroundColor="#ffffff" :breakpoints="{500: { rowPerView: 2,}}"> <temp
js 中文转成拼音字母 并A-Z排序 索引功能
qq_18660259的博客
09-12 1万+
1.第一种方法比较： function pySegSort(arr,empty) {    if(!String.prototype.localeCompare)        return null;         var letters = "*abcdefghjklmnopqrstwxyz".split('');    var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它
引用zepto jquery图片懒加载 浏览器如何测试
qq_18660259的博客
09-30 614
打开netword 进行网速调控,选择默认的网速或者自己设置网速 这样就可以看出是不是图片在懒加载了
zepto获取option的值
qq_18660259的博客
08-24 554
1.用原生 javascript  直接 id.seletedOptions[0].getAttrbute("value") 2.用zepto  $('option').not(function(){ return !this.selected }).val(); 3.用原生 javascript id.options[id.selectedIndex].value;
手写实现图片瀑布流效果教程与源码
在Web开发中，实现一个图片瀑布流效果是一种常见需求，它能够让网页布局更加美观和实用。瀑布流布局能够适应不同高度的图片，形成错落有致的展示效果，用户在浏览时可以更加直观地看到图片内容，尤其适合用在图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值