전단 폭포류 상해 및 전후 상호작용 폭포류

	
	
	


	

	
	//    div  
	var outDiv = document.querySelector('.container');
	//        
    var imgArr = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];
    
    //    
    function fullImg (){
    	//    img  
    	for(var i=0; i<imgArr.length; i++){
    		//   div  img       img     div
	    	var div = document.createElement('div');
	    	//    div    in
	    	div.className = 'in';
	    	//  img  
	    	div.innerHTML = '<img src="images/pblimg/i'+imgArr[i]+'.jpg" alt="">';
	    	//    div     div 
	    	outDiv.append(div);
        }
    }
    //       
    function creatWaterFull (){
    	//         img div
    	var indivs = document.getElementsByClassName('in');
    	//           div                div
	    var num = Math.floor(document.documentElement.clientWidth/indivs[0].offsetWidth);
	    //         div，        div       div   ，        
	    outDiv.style.width = num * indivs[0].offsetWidth + 'px';
	    //          div  
	    var heightArr = [];
	    //    div
	    for(var i=0; i<indivs.length; i++){
	    	//  i<num        div   
	    	if(i<num){
	    		//     div         
	    		heightArr.push(indivs[i].offsetHeight);
	    	//          div  
	    	}else{
	    		//    div    
	    		indivs[i].style.position = 'absolute';
	    		//  apply     heightArr           ，     minHeight
	    		var minHeight = Math.min.apply(null,heightArr);
	    		//                 (   indivs          )
	    		var minIndex = heightArr.indexOf(minHeight);
	    		//  top   top            ，       minHeight
	    		indivs[i].style.top = minHeight + 'px';
	    		//  lef   left          offsetleft 
	    		//  minIndex          indiv          div    offsetleft 
	    		indivs[i].style.left = indivs[minIndex].offsetLeft + 'px';
	    		//      ，heightArr                  
	    	    heightArr[minIndex] += indivs[i].offsetHeight;
	    	}
	    }
    }
    //      ，      
    fullImg();
    creatWaterFull();


//------------------                 ，          ----------------------



    //                      
    function isNeedCreat (){
    	//           div  
    	var indivs = document.getElementsByClassName('in');
    	//                    IE
    	var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
    	//  div        div top 
    	var lastTop = indivs[indivs.length-1].offsetTop;
    	//       
    	var viewHeight = document.documentElement.clientHeight;
    	//                        div top 
    	//                ，         ，    true       
    	if(scrollHeight + viewHeight > lastTop){
    		return true;
    	}
    }
    //       ，                  
    document.onscroll = function (){
    	//    true          
    	if(isNeedCreat()){
    		//                 
    		fullImg();
    		creatWaterFull();
    	}
    }
	

二、前后端交互瀑布流

前端代码：

	
	
	


	

	     //           ajax   ‘jquery  ajax、  ajax    ajax’
	
    var outDiv = document.getElementsByClassName('container')[0];
    var imgArr;
    window.yangjieAjax({
    	type:'get',
    	url:'waterFull.php',
    	async:true,
    	data:{},
    	success:function (res){
    		imgArr = res.info;
                fullImg();
                creatWaterFull();
                document.onscroll = function (){
		    	if(isNeedCreat()){
		    		fullImg();
		    		creatWaterFull();
		    	}
		}
    	}
    })

    function fullImg (){
    	for(var i=0; i<imgArr.length; i++){
	    	var div = document.createElement('div');
	    	div.className = 'in';
	    	div.innerHTML = '<img src="images/pblimg/i'+imgArr[i]+'.jpg" alt="">';
	    	outDiv.append(div);
        }
    }
    function creatWaterFull (){
    	var indivs = document.getElementsByClassName('in');
	    var num = Math.floor(document.documentElement.clientWidth/indivs[0].offsetWidth);
	    outDiv.style.width = num * indivs[0].offsetWidth + 'px';
	    var heightArr = [];
	    for(var i=0; i<indivs.length; i++){
	    	if(i<num){
	    		heightArr.push(indivs[i].offsetHeight);
	    	}else{
	    		indivs[i].style.position = 'absolute';
	    		var minHeight = Math.min.apply(null,heightArr);
	    		var minIndex = heightArr.indexOf(minHeight);
	    		indivs[i].style.top = minHeight + 'px';
	    		indivs[i].style.left = indivs[minIndex].offsetLeft + 'px';
	    	    heightArr[minIndex] += indivs[i].offsetHeight;
	    	}
	    }
    }
    
    function isNeedCreat (){
    	var indivs = document.getElementsByClassName('in');
    	var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
    	var lastTop = indivs[indivs.length-1].offsetTop;
    	var viewHeight = document.documentElement.clientHeight;
    	if(scrollHeight + viewHeight > lastTop){
    		return true;
    	}
    }
	

后台php代码：

 'ok','info' => $imgArr);
echo json_encode($success);

?>

 'ok');
//     
$con = mysqli_connect('localhost','root','','imgdb');
//           (       )
if($con){
	//    
	mysqli_query($con,'set names utf8');
	mysqli_query($con,'set character_set_client=utf8');
	mysqli_query($con,'set character_set_results=utf8');
	//                  
	$result = $con->query('select * from imglist where 1');
	//                  
	$info = [];
	//         
	for($i=0; $row=$result->fetch_assoc(); $i++){
		$info[$i] = $row;
	}
	//   $info      $imgArr   ,     
	for($j=0; $j

setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
			}catch(PDOException $e){
				echo $e->getMessage();
			}
		}
		return self::$pdo;
	}
}
$success = array('msg'=>'ok');
$pdo = singleTonPdo::getpdo();
$pdo->query('set names utf8');
$pdo->exec('set names utf8');
try{
	$pdo->beginTransaction();
	$pdoso = $pdo->prepare('select * from imglist where 1');
	$pdoso->execute();
	$pdoso->bindColumn(1,$src);
	$info = [];
	for($i=0; $pdoso->fetch(PDO::FETCH_ASSOC); $i++){
		$info[$i] = ['lujing'=>$src];
	}
    for($j=0; $jcommit();
}catch(PDOException $e){
	$pdo->rollBack();
	echo '  ' ;
}

echo json_encode($success);
?>