当前位置：网站首页>Simple waterfall effect

Simple waterfall effect

2022-06-25 09:34:00 【silno】

Toss around for a few days , Finally, I made a simple waterfall flow effect without plug-ins

Go straight to the code , It can be used in practice . Take it for reference if necessary . Mobile phone vertical display 2 Column , The horizontal screen shows 3 Column . The computer displays... According to the browser size 2-4 Column , The specific number of columns can be adjusted according to the browser size .

The picture is a screenshot of the effect . Prepare the picture materials by yourself

<!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);

 
 
 // Monitor horizontal and vertical screen 
    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;

    // according to userAgent Judge if it's a cell phone 
    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;    

     // Judge whether it is a mobile phone according to the screen resolution 
     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>

picture 4 Column effect