简单的瀑布流效果

最新推荐文章于 2024-06-17 08:54:18 发布

silno

最新推荐文章于 2024-06-17 08:54:18 发布

阅读量298

点赞数

文章标签：瀑布流

本文链接：https://blog.csdn.net/silno/article/details/107912698

版权

折腾几天，终于做了个简单的无插件的瀑布流效果

直接上代码，可以实际使用。有需要的拿去参考。手机竖屏显示2列，横屏显示3列。电脑根据浏览器大小显示2-4列，具体列数可根据浏览器大小调整。

图片是效果截图。图片资料自己准备

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
	.parent1 { 
		width:100%;
		-moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
	 }
	 .child1 {
		margin-bottom:20px;	 
		-moz-page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		color:#0f0;		}
</style>
<script>
var x=0;
var heng=heng_flag();
var mobile_flag = isMobile();
$(document).ready(function(){

var x=document.documentElement.clientWidth||document.body.clientWidth;
heng=heng_flag();    
x=$(".aacc").width();
buju(x);

 
 
 //监听横竖屏
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
	
	
    window.addEventListener(evt,resize,false);
    function resize(fals) {
    heng=heng_flag();	   
    }
    resize(true);

 
 
 
    $(window).resize(function(){
    x=document.documentElement.clientWidth||document.body.clientWidth;
    x=$(".aacc").width();
    buju(x);
	
  }); 
  
  
  
});



    




function buju(w){
	var c=0;
	var w_c=0;
	if(heng){
	//alert("heng1 "+heng);
		if(w>1400){
		c=4;
		w_c=4.15;
		}else if(w>800){
		c=3;
		w_c=3.15;
		}else{
		c=2;
		w_c=2.1;
		}
		if(mobile_flag){
			c=4;
			w_c=4.15;
		}
	}else{
		c=2;
		w_c=2.1;
	}
	$(".parent1").css("column-count",c);
	$(".parent1").css("-moz-column-count",c);
	$(".parent1").css("-webkit-column-count",c);
	$(".child1 img").width(w/w_c);
}

function heng_flag() {
       if(window.orientation == 0 || window.orientation == 180) {
            return false;
       }else {
			return true;
       }
}

function isMobile() {
    var userAgentInfo = navigator.userAgent;

    var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

    var mobile_flag = false;

    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
        if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
            mobile_flag = true;
            break;
        }
    }

     var screen_width = window.screen.width;
     var screen_height = window.screen.height;    

     //根据屏幕分辨率判断是否是手机
     if(screen_width < 500 && screen_height < 800){
         mobile_flag = true;
     }

     return mobile_flag;
}



</script>

<div id id="aacc" class="aacc" style="width:95%;">
	<div class="parent1">
		<div class="child1"><img src="images/9.jpg">5</div>
		<div class="child1"><img src="images/1.jpg">1</div>
		<div class="child1"><img src="images/2.jpg">2</div>
		<div class="child1"><img src="images/3.jpg">3</div>
		<div class="child1"><img src="images/5.jpg">6</div>
		<div class="child1"><img src="images/4.jpg">3</div>
		<div class="child1"><img src="images/6.jpg">5</div>

		<div class="child1"><img src="images/7.jpg">6</div>
		<div class="child1"><img src="images/8.jpg">0</div>
		<div class="child1"><img src="images/0.jpg">8</div>
		<div class="child1"><img src="images/1.jpg">9</div>

	</div>
</div>
</body>

图片4列效果

图片2列效果

silno

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
简单的瀑布流效果

折腾几天，终于做了个简单的无插件的瀑布流效果直接上代码，可以实际使用。有需要的拿去参考。手机竖屏显示2列，横屏显示3列。电脑根据浏览器大小显示2-4列，具体列数可根据需要调整。图片是效果截图。图片资料自己准备<!DOCTYPE html><meta charset="utf-8" /><body><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">&lt
复制链接

扫一扫