图片瀑布展示 web开发

最新推荐文章于 2021-08-15 14:34:28 发布
最新推荐文章于 2021-08-15 14:34:28 发布
阅读量222 收藏
点赞数
分类专栏： 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>
瓦是榴莲个哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 瀑布流展示
12-10
适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。适用于html 商品页 两列，瀑布流展示 ，用于在商品图片大小不一时，还能有一个看起来舒适的布局。
前端页面图片瀑布流展示
09-12
前端图片展示，采用瀑布流方式，可分步加载图片。可点击加载更多来加载其余图片。
css 瀑布流布局_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？...
weixin_39870155的博客
11-29 325
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街原理图:在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。使用CSS3S实现只需要如下4步:1. 准备图片素材2. 书写相应HTML结构3. 了解CSS 多栏(Multi-column) 属性4. 使用CSS 多栏属性完成瀑布流布局一、第一步 —— 准备图片素材目标 : 准备图片素材,每张图片的宽度...
瀑布流的实现方式
涂涂
03-03 1164
1.瀑布流的实现方式 2.实现垂直方向上的居中方式 3.谈谈绝对定位和相对定位
小程序商城瀑布流商品展示实现
热门推荐
小圣贤君的博客
08-22 1万+
现在小程序商城越来越多，通常的商城中，商品展示都是那种常规的两列规则展示，但是现在越来越多的应用开始采用瀑布流的方式来展示商品，商品的图片高度不定，商品根据图片容器大小，自由排列，依次下排。 今儿，小圣贤君就为大家讲解一下，如何在小程序中实现瀑布流形式展示商品。 一般页面中商品会显示两列，通过接口拿到数据后，判断现有的两列的长短，将商品加入到列高较短的那一列中，如何判断两列的高低呢？ 其实很...
移动端web开发技巧
不积跬步无以至千里
10-27 263
移动端web开发技巧
jquery 瀑布流实例最流行瀑布流图片展示
qq_365392777
08-15 346
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 二、代码目录 三、代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
web前端入门到实战：纯CSS瀑布流与JS瀑布流
软件开发-前端开发-IT
10-08 314
瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时...
Web开发--动保网站
DQA1505045218的博客
07-05 1072
Web开发 一、建站依据 由于这次疫情，有关野生动物保护的问题又一次进入人们的视线，并且我本身也比较喜欢野生动物，所以选择创建与动保为主题的网站。让我能对野生动物有更多了解，也能向人们展示野生动物更美的风采和时下需要的动保知识。 二、需求分析 野生动物是人类的好朋友，保护好野生动物对于保护生物多样性，维护生态平衡，建设社会主义生态文明具有重要意义。我国是世界上野生动物资源最丰富的国家之一，随着社会发展，由于各种人为和自然原因，越来越多的野生动物已经灭绝或濒临灭绝，野生动物保护宣传工作显得尤为重要。为此，我想
瀑布流相册摄影图片展示响应式模板4873.zip
最新发布
04-21
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
h5 css 瀑布流图片展示
帆酱的博客
04-14 1013
在H5的图片布局中，我们经常遇到容器盒子一致但图片大小不一的情况，如果仅仅展示一列的话，则可以通过调整图片宽度100%来布局，但是如果有二列呢，我们使用css3的column-count属性分列 demo查看：https://my.weblf.cn/alone_page/pages/falls_img.html 全部代码： <!DOCTYPE html> <html la...
瀑布流效果展示图片的实现（小demo）
qq_43437571的博客
09-30 993
代码展示： 首先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 1939
一、安装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 7979
1.第一种方法比较： function pySegSort(arr,empty) {    if(!String.prototype.localeCompare)        return null;         var letters = "*abcdefghjklmnopqrstwxyz".split('');    var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它
引用zepto jquery图片懒加载 浏览器如何测试
qq_18660259的博客
09-30 578
打开netword 进行网速调控,选择默认的网速或者自己设置网速 这样就可以看出是不是图片在懒加载了
zepto获取option的值
qq_18660259的博客
08-24 529
1.用原生 javascript  直接 id.seletedOptions[0].getAttrbute("value") 2.用zepto  $('option').not(function(){ return !this.selected }).val(); 3.用原生 javascript id.options[id.selectedIndex].value;
g() 获得id单一 和class多个数组的class 获取数据push进去
qq_18660259的博客
08-09 341
jquery 简单拖拉事件
qq_18660259的博客
08-08 325
Document .drag { position: absolute; background: #0000CC; top: 100px; left: 200px; padding: 0; width: 100px; height: 100px; } $(document).ready(function() { var move
js 验证60s发短信
qq_18660259的博客
08-12 308
function countDown(x){     $(".send-forget2").removeClass("blue").html(""+x+"s后重发");     if(x>0){         return setTimeout("countDown("+x+"-1)",1000);     }     else{         $(".send-forget2")
QT使用imageArea多个图片使用瀑布展示怎么实现
05-25
你可以使用Qt的QML模块中的GridView来实现瀑布流展示多个图片，具体步骤如下： 1. 首先在QML文件中创建一个GridView组件，设置它的列数和行数，以及每个格子的宽度和高度。你可以根据自己的需求来设置这些属性。 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值