瀑布流的寫法和重點

時間 2019-11-21

標籤瀑布寫法重點欄目悠閒生活简体版

原文原文鏈接

<!DOCTYPE html>javascript

<html>css

<head>html

<title>瀑布流</title>app

*{margin: 0;padding: 0;}spa

#wrap{width: 900px;margin: 0 auto;border: 1px solid #CCCCCC;}htm

ul{list-style: none;float: left;width: 300px;}ip

ul li{width: 280px;margin-left: 20px;margin-top: 20px;background: lightblue;}it

</style>

</head>

<body>

</div>

</body>

</html>

// //獲取全部的ul

// var ulArray = document.querySelectorAll('ul');

// //隨機一個min到max的數字

// function randHeight(min,max){

// return parseInt(Math.random()*(max-min +1)+min)

// }

// //查找ulArray高度最小的ul 而且返回最小的ul

// function findMinUL(){

// var min = ulArray[0];

// for(var i = 0; i < ulArray.length;i++){

// if(min.offsetHeight > ulArray[i].offsetHeight){

// min = ulArray[i];

// }

// return min;

// }

// function waterWallFun(){

// function createLi(){

// for(var i = 0; i < 20; i++){

// var li = document.createElement('li');

// li.innerHTML = i + 1;

// //給li隨機一個高度

// li.style.height = randHeight(150,400) +'px';

// //找出當前三個ul 中高度最小的ul

// var minUl = findMinUL();

// //把建立的li拼接到找到的最小的ul

// minUl.appendChild(li);

// }

// createLi();

//// 檢測屏幕的活動過程

// window.onscroll = function(){

// //計算滾動條是否滑到了最底部?

// //1.拿出滾動的距離

// var hasScolled =

// document.documentElement.scrollTop ||

// document.body.scrollTop;

// //計算滑動的最大範圍

// var maxHeight = document.documentElement.offsetHeight-

// document.documentElement.clientHeight;

// if(hasScolled >= maxHeight){

// createLi();

// }

// waterWallFun();

var ulArray = document.querySelectorAll('ul');

//取一個隨機數

function randHeight(min,max){

return parseInt(Math.random()*(max-min+1)+min)

}

//找出 ul 高度最小的一個

function minUl(){

var min = ulArray[0];

for(var i = 0; i < ulArray.length;i++){

if(min.offsetHeight > ulArray[i].offsetHeight){

min = ulArray[i];

}

return min;

}

// 獲取 ul

function waterFallFun(){

function creatLi(){

for(var i = 0; i < 20; i++){

var li = document.createElement('li');

li.innerHTML = i + 1;

li.style.height = randHeight(150,400) +'px';

//獲取最小的ul

var minul = minUl();

minul.appendChild(li);

}

creatLi();

window.onscroll = function(){

//檢測滾動條是否到了底部

var hasHeight = document.documentElement.scrollTop || document.body.scrollTop;

var aaa = document.documentElement.offsetHeight - document.documentElement.clientHeight;

if( hasHeight >= aaa){

creatLi();

}

waterFallFun();

</script>

1. 手寫瀑布流
2. JQ手寫瀑布流
3. 用CHTCollectionViewWaterfallLayout寫瀑布流
4. 寫一個CSS瀑布流佈局
5. 分享：純 css 瀑布流和 js 瀑布流
6. scrollTop 瀑布流的關鍵點 offsetTop
7. flutter_staggered_grid_view和瀑布流效果
8. 瀑布流佈局
9. css3瀑布流
10. 瀑布流
更多相關文章...
• ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
• Hibernate的運行流程 - Hibernate教程
• 適用於PHP初學者的學習線路和建議
• 常用的分佈式事務解決方案

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。