照片瀑布流效果（js，jquery分别实现与知识点总结）

最新推荐文章于 2021-07-07 16:23:10 发布
最新推荐文章于 2021-07-07 16:23:10 发布
阅读量649 收藏
点赞数
分类专栏： html css javascript javascript jquery 文章标签： js jquey 照片瀑布流 知识点总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/normol/article/details/53965799
版权

看了慕课网的瀑布流教程，自己跟着写了遍，然后总结了下知识点

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.8.3.min.js"/></script>
<script type="text/javascript" src="script2.js"/></script>
<title></title>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
      margin-top: 10px;
        position: relative;

    }
    .pin{
        margin:0;
        padding:0 0 5px 3px;
        float:left;
    }
    .box{
        padding: 10px 5px 0 5px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        border:0;
        margin:0;
        width:200px;
        height:auto;
    }
</style>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="images/3.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

用js实现部分： 

window.οnlοad=function(){
	
	waterfall('main','box');
	 var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]};
    
	    window.οnscrοll=function()
	    {
	        if(checkscrollside())
	        {
	            var main= document.getElementById('main');
	            for(var i=0;i<dataimg.data.length;i++)
	            {
	                var pin=document.createElement('div'); 
	                pin.className='pin';                  
	                main.appendChild(pin);              
	                var box=document.createElement('div');
	                box.className='box';
	                pin.appendChild(box);
	                var img=document.createElement('img');
	                img.src='images/'+dataimg.data[i].src;
	                box.appendChild(img);
	            }
	            waterfall('main','box');
	        };
	    }
}		

function  $$(clsName,ele)  
{  
    //如果当前浏览器支持通过类名获取元素，直接返回  
    if(document.getElementsByClassName)  
    {  
        return(ele||document).getElementsByClassName(clsName);  
    }  
    else  
    {  
        //尽量把这些量存放在变量中，否则  
        //例如循环不用len，而用nodes.length，会每一次循环都遍历一次  
        var nodes=(ele||document).getElementsByTagName("*"),  
        eles=[],  
        len=nodes.length
        i,  
        j,  
        currNode,  
        clsNames,  
        clsLen;  
        for(i=0;i<len;i++)  
        {  
            currNode=nodes[i];  
            clsNames=currNode.className.split(' ');  
            clsLen=clsNames.length;  
            for(j=0;j<clsLen;j++)  
            {  
                if(clsNames[j]==clsName)  
                {  
		eles.push(currNode);  
	                    break;  
                }  
            }  
        }  
        return eles;  
    }
}
//知识点一：js中通过属性offset--等，但padding,margin等只能获取在内联html中有的样式，
//因此，下面这个函数是获取css样式的通用函数。
var getStyle = function(dom, attr)
{
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
}
    function waterfall(parent,box){
    	var main=document.getElementById(parent);
    	var boxes=$$(box,main);
          var pins=$$('pin',main);
    	//console.log(boxes.length);
         var pinw=pins[0];
    	var boxw=boxes[0].offsetWidth+parseInt(getStyle(pinw,'paddingLeft'));
        console.log(boxes[0].clientWidth);
    	//console.log(boxw+','+main.clientWidth+','+main.offsetWidth+','+getStyle(boxes[0],'margin'));
    	var cols=Math.floor(document.documentElement.clientWidth/boxw);
          console.log(cols);
    	main.style.width=cols*boxw+'px';
    	var boxesh=[];
    	for(var i=0;i<boxes.length;i++){
    		if(i<cols){
    			boxesh.push(boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingBottom')));
    		}
    		else{
    			var minh=Math.min.apply(null,boxesh);
    			var index=getMinIndex(boxesh,minh);
    			boxes[i].style.position='absolute';
    			boxes[i].style.top=minh+'px';
    			boxes[i].style.left=index*boxw+'px';
    			boxesh[index]+=boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingLeft'));
    		}
    	}
    }

    function getMinIndex(arr,val){
    	for(var i=0;i<arr.length;i++){
    		if(arr[i]==val)
    			return i;
    	}
    }

    function checkscrollside(){
    var main=document.getElementById('main');
    var aPin=$$('pin',main);
    console.log(aPin.length);
    var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var documentH=document.documentElement.clientHeight;//页面高度
    return (lastPinH<scrollTop+documentH)?true:false;
}


用jquery实现部分：

//知识点一：jquery事件绑定
$(window).on('load',function(){
	waterfall();
	var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]};
	$(window).on('scroll',function(){
		if(checkScrollSlide()){
			//知识点二：数组遍历
			//知识点三：value参数是DOM对象
			$.each(dataimg.data,function(key,value){
				//知识点四：创建DOM元素，不需要createElement('div');
				//知识点五：为元素绑定class，不再是className='';
				//知识点六：往元素中填充元素，不再是obj.appendChild(obj);
				//知识点七：属性的获取和设置，可以直接用attr (注意这是针对jquey对象的方法)；
				var oBox=$('<div>').addClass('pin').appendTo($('#main'));
				var oPic=$('<div>').addClass('box').appendTo($(oBox));
				$('<img>').attr('src','images/'+value.src).appendTo($(oPic));
			})
			waterfall();
		}
	})
})

function waterfall(){
	var $boxs=$('#main>.pin');
	//知识点八：jquery中的outerWidth(false)方法==js中的offsetWidth属性
	//innerWidth()==clientWidth;
	//width()==width;
	var w=$boxs.eq(0).outerWidth(false);
	//console.log(w);
	var cols=Math.floor($(window).width()/w);
	//知识点九：jquery可以直接css(),js是obj,style.margin:  ect;
	$('#main').width(cols*w).css('margin','10px auto');
	var hArr=[];
	//注意，这儿value是DOM对象
	$boxs.each(function(index,value){
		var h=$boxs.eq(index).outerHeight(false);
		if(index<cols){
			hArr.push(h);
		}else{
			var minH=Math.min.apply(null,hArr);
			//知识点十：jquey中直接封装了一个数组中找取某个值对应下标的方法
			var minHIndex=$.inArray(minH,hArr);
			$(value).css({
				'position':'absolute',
				'top':minH+'px',
				'left':minHIndex*w+'px',
			});
			hArr[minHIndex]+=$boxs.eq(index).outerHeight(false);
		}
	})
	//console.log(hArr);
}

function checkScrollSlide(){
	//知识点十一：可以直接last()方法获取最后一个元素
	var $lastBox=$('#main>div').last();
	//知识点十二：js中的一系列offsetTop等属性，变成了jquey中的offset().top  ect;
	var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight(false)/2);
	var scrollTop=$(window).scrollTop();
	var documentH=$(window).height();
	return (lastBoxDis<scrollTop+documentH)?true:false;
}


相关知识点链接：

事件绑定：点击

获取元素样式：点击
























normol
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity工程 照片墙 瀑布流
03-29
Unity大屏展示照片墙 1、照片墙设置：是否流动动态照片、流动速度 2、照片的点击弹出；（含有碰撞、挤压） 3、照片的出场动画、弹出动画 4、2D物理系统 5、弹出翻页功能
整理了js实现图片瀑布流效果的步骤
qq_46038677的博客
07-23 396
js实现瀑布流效果步骤 写出基本的HTML内容 加入一些css样式 效果一：将宽度固定化（每一行放的图片个数相同） js方法一：要得到父节点（放置主体内容的div盒子）下的子节点（承载图片的div盒子）个数 先得到主体div里面所有内容（使用“*”获取里面所有节点的class名称），再通过if判断语句得到承载图片的div放进数组中 再获取到屏幕的宽度，再除以图片的宽度就能得到每一行能放下的图片个数（再通过Math.floor()函数向下取整来处理得到的值）
瀑布流照片墙代码.zip
05-24
首先非常感谢网友新新的无私分享，此jQuery特效是一款效果非常酷的瀑布流照片墙作品，展示相片的效果非常大气，由于使用了CSS3的缘故，大家运行时请使用支持CSS3的主流浏览器，如谷歌、火狐等。。。 作品包括了以下功能： 1、瀑布流 2、弹出层 3、动画插件 4、图片放大 5、css3功能
通过meteor实现的一个照片墙
weixin_34344677的博客
05-13 65
always love tech 初次使用meteor所遇到的一个问题： insert failed: Method '/pictures/insert' not found 提示没有这个方法，然后可以看到在mongodb数据库中确实没有pictures这个collection； 于是开始google it，发现stackoverflow上面有个问题很相似， Pictures=new...
瀑布流
luqingxuan
12-25 102
  https://github.com/desandro/masonry   http://callmecavs.com/bricks.js/   http://www.wookmark.com/jquery-plugin
详解照片瀑布流效果（js，jquery分别实现与知识点总结）
10-20
在本文中，我们将深入探讨如何使用JavaScript (JS) 和 jQuery 实现这一效果，并总结相关知识点。 **1. 基础HTML结构** 首先，我们需要创建一个包含多个图片容器的HTML结构。在示例中，每个图片都被包含在一个`...
jQuery和JS实现瀑布流
10-11
利用JS和jQuery实现前端布局中的瀑布流布局，适合前端进阶者观看，有详细的视频讲解！
jquery实现瀑布流效果 jquery下拉加载新数据
10-20
主要为大家详细介绍了jquery实现瀑布流效果，下拉加载新数据,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现的瀑布流加载效果示例
11-25
本文实例讲述了jQuery实现的瀑布流加载效果。分享给大家供大家参考，具体如下： demo.js： $(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], ...
Unity UGUI Photo Wall 照片墙效果
12-26
Unity UGUI Photo Wall 照片墙效果 1、里面包含DoTween 插件； 2、导入Unity，里面有完整测试工程； 3、Unity UGUI 实现； 4、可以支持 UGUI Canvas 的 Render Mode 任意形式，包括 Screen space-Overlay，Screen space-Camera，World Space；
最少代码的瀑布流实现预览效果
09-01
最少代码的瀑布流实现预览效果
超酷的照片墙展示效果
12-21
描述：结合淡入淡出、旋转、缩放、倾斜及3D效果，照片快速左侧切入，旋转3D效果. 参考示例：http://www.jq22.com/jquery-info5225
照片墙效果
weixin_34378922的博客
03-08 178
2019独角兽企业重金招聘Python工程师标准>>> ...
html 瀑布流 编辑 删除,HTML瀑布流操作
weixin_34493827的博客
07-07 135
瀑布流操作*{margin:0;padding:0;}#container{width:1200px;margin:auto;/*background-color: black;*/position:relative;}#container img{width:188px;}.outer{margin:5px;padding:5px;border:solid 1px #888;border-rad...
UICollectionViewFlowLayout 瀑布流
张明炜
12-24 157
  Tip: 自己开发了好玩的APP： 《小明搜索》（App Store上搜索："小明搜索"） [点击下载 "小明搜索"](https://itunes.apple.com/cn/app/小明搜索/id1378798470?l=en&amp;mt=8) 1、集必应、百度、搜狗为一体的搜索平台 2、用户随意收藏或添加自己喜欢的网站 3、网页文字播放功能 4、收藏网页的视频，本地播...
Ugui中的图片拖拽
船到桥头灬自然沉 的博客
11-29 332
using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.EventSystems; public class UGUIForDrag : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler, IDropHan
JQuery实现照片瀑布流
POSTBIRD
01-10 3392
JQuery实现照片瀑布流 摘要：总所周知，百度搜图结果下拉会越来越多自动呈现，成为瀑布流。想要打造类似百度图片搜索的瀑布流不是困难的事情，通过javascript也能实现只是实现的比较麻烦，通过jquery实现50+行代码即可。而且相比百度的样式，更加自由化！ 废话不多说，先上图：下图最终的效果图，比较丑，是因为图片我没有经过处理，随便找的图片。【照片特点】宽度全部相同，高度不相同。 （注：
小程序商城瀑布流商品展示实现
热门推荐
小圣贤君的博客
08-22 1万+
现在小程序商城越来越多，通常的商城中，商品展示都是那种常规的两列规则展示，但是现在越来越多的应用开始采用瀑布流的方式来展示商品，商品的图片高度不定，商品根据图片容器大小，自由排列，依次下排。 今儿，小圣贤君就为大家讲解一下，如何在小程序中实现瀑布流形式展示商品。 一般页面中商品会显示两列，通过接口拿到数据后，判断现有的两列的长短，将商品加入到列高较短的那一列中，如何判断两列的高低呢？ 其实很...
一款超级简单的瀑布流的制作
weixin_34138139的博客
12-12 140
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery实现瀑布流效果
最新发布
05-24
jQuery实现瀑布流效果需要先引入jQuery库，然后通过计算每个元素的位置和高度，来实现元素的动态排列。 以下是一个简单的示例代码： HTML部分： ```html <div id="waterfall"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> <div class="item">item5</div> <div class="item">item6</div> </div> ``` CSS部分： ```css #waterfall { width: 800px; /* 瀑布流容器宽度 */ margin: 0 auto; } .item { width: 380px; /* 每个元素宽度 */ margin: 10px; float: left; background-color: #eee; } ``` jQuery部分： ```javascript $(function() { // 获取瀑布流容器的宽度 var containerWidth = $('#waterfall').width(); // 获取每个元素的宽度和间距 var itemWidth = $('.item').outerWidth(true); // 计算列数 var cols = Math.floor(containerWidth / itemWidth); // 创建一个数组用于存放每一列的高度 var heightArr = []; for (var i = 0; i < cols; i++) { heightArr.push(0); } // 遍历每个元素 $('.item').each(function() { // 获取元素的高度 var itemHeight = $(this).outerHeight(true); // 找到高度最小的那一列 var minHeight = Math.min.apply(null, heightArr); var minIndex = $.inArray(minHeight, heightArr); // 设置元素的位置 $(this).css({ 'left': minIndex * itemWidth, 'top': minHeight }); // 更新该列的高度 heightArr[minIndex] += itemHeight; }); }); ``` 上述代码实现了一个简单的瀑布流效果，可以根据实际需求进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值