基于JavaScript實現(xiàn)瀑布流布局(二)
更新時間：2016年01月26日 16:13:26 投稿：lijiao
這篇文章主要介紹了原生JavaScript實現(xiàn)瀑布流布局的相關(guān)資料,實現(xiàn)鼠標下拉圖片自動加載效果，和百度圖片效果類似，需要的朋友可以參考下
本文實例講解了JavaScript實現(xiàn)瀑布流布局詳細代碼，分享給大家供大家參考，具體內(nèi)容如下
1.建立Html模版
想法是先用一個div container承載所有內(nèi)容,然后div box用來放置圖片,最后div box_border來當圖片框,代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
</head>
<body>
<div class="container" id="container">
<div class="box_border" id="box_border">
<div class="box" id="box1">
<img src="image/01.jpg">
</div>
<!--把Box復制多份,這里因為代碼重復省略了-->
</div>
</div>
</body>
</html>
2.通過css簡單設置樣式
主要設置水平放置,相框顏色,邊界之類的
/*
邊界不留空,背景黑灰
*/
body{
margin: 0px;
background: darkgray;
}
/*
總布局設置為相對布局
*/
.container{
position: relative;
}
/*
設置box屬性
*/
.box{
padding: 5px;
float: left;
}
/*設置圖片邊框陰影和圓角
*/
.box_border{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
/*設置圖片格式*/
.box_border img{
width: 150px;
height: auto;
}
3.JS控制每一行所擺放的圖片個數(shù)
上面的css布局之后,瀏覽器窗口大小改變,里面的圖片數(shù)量也會改變,現(xiàn)在要用JS固定住每一行的圖片數(shù)量,對于不同尺寸的屏幕都能做到很好的效果
/*
用于加載其他函數(shù)
*/
window.onload = function(){
setImgLocation("container");
}
/*
設置圖片個數(shù)
*/
function setImgLocation(parent){
var cparent = document.getElementById(parent);//得到父節(jié)點
var childArray = getChildNodes(cparent);//得到圖片數(shù)量
var imgWidth = childArray[0].offsetWidth;//獲取照片寬度
var screenWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度
var count = Math.floor(screenWidth/imgWidth);//每行的個數(shù)
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設置其寬度并居中
}
/*
獲取全部圖片的個數(shù)
*/
function getChildNodes(parent){
var childArray =[];//定義一個數(shù)組存放圖片box
var tempNodes = parent.getElementsByTagName("*");//獲取父節(jié)點下的所有節(jié)點
//循環(huán)添加class為box的節(jié)點
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子節(jié)點
}
注意:針對不同屏幕大小顯示的個數(shù)是不一樣的
4.JS實現(xiàn)靜態(tài)瀑布流
先實現(xiàn)靜態(tài)的布局,也就是瀏覽器下拉不會自動刷新出新的圖片.
實現(xiàn)排列算法很簡單
- 1.把第一排圖片的高度全部存到一個數(shù)組
- 2.計算出第一排中的圖片的最小高度和對應位置
- 3.把第一排之后的第一個圖片放到該位置上
- 4.重新設置該位置的高度為兩個圖片相加
- 5.循環(huán)2剩余全部圖片
代碼:
/*
用于加載其他函數(shù)
*/
window.onload = function(){
setImgLocation("container");
}
/*
設置圖片個數(shù)及位置排列
*/
function setImgLocation(parent){
var cparent = document.getElementById(parent);//得到父節(jié)點
var childArray = getChildNodes(cparent);//得到圖片數(shù)量
var imgWidth = childArray[0].offsetWidth;//獲取照片寬度
var screenWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度
var count = Math.floor(screenWidth/imgWidth);//每行的個數(shù)
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設置其寬度并居中
//定義數(shù)組,存放第一行照片高度
var imgHArray = [];
//循環(huán)遍歷圖片
for(var i=0;i<childArray.length;i++){
//如果圖片在第一行則獲取高度
if(i<count){
imgHArray[i] = childArray[i].offsetHeight;
}else//否則把最小高度的填充剩余圖片
{
var minHeight = Math.min.apply(null,imgHArray);//獲取最小高度
var minIndex = getMinIndex(minHeight,imgHArray);//獲取最小高度對應的下標
childArray[i].style.position = "absolute";//設置要填充的圖片盒子為絕對布局,否則不能更換位置
childArray[i].style.top = minHeight+"px";//設置要填充圖片距頂高度
childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//設置要填充圖片距左高度
imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把當前位置高度設為兩個圖片相加
//開始下一輪循環(huán)
}
}
}
/*
獲取最小高度對應的下標
*/
function getMinIndex(minHeight,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/*
獲取全部圖片的個數(shù)
*/
function getChildNodes(parent){
var childArray =[];//定義一個數(shù)組存放圖片box
var tempNodes = parent.getElementsByTagName("*");//獲取父節(jié)點下的所有節(jié)點
//循環(huán)添加class為box的節(jié)點
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子節(jié)點
}
5.js實現(xiàn)動態(tài)加載
動態(tài)加載也就是滾動條永遠滑不到底部,要解決動態(tài)加載我們需要考慮兩個問題:
1）.什么時候加載?
滑動距離+瀏覽器高度>最后一張圖片距離頂部的距離
2）.怎樣加載?
通過創(chuàng)建新的節(jié)點,把創(chuàng)建的節(jié)點添加進去即可
最終代碼:
/*
用于加載其他函數(shù)
*/
window.onload = function() {
var cparent = document.getElementById("container");//得到父節(jié)點
setImgLocation(cparent);
//設置加載的圖片
var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg",
"image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];
//滑動監(jiān)聽
window.onscroll = function () {
if (checkLoad(cparent)) {
for (var i = 0; i < data.length; i++) {
//創(chuàng)建新的節(jié)點
var div1 = document.createElement("div");
div1.className = "box";
var div2 = document.createElement("div");
div2.className = "box_border";
var img = document.createElement("img");
img.className = ".box_border img";
img.src = data[i];
div2.appendChild(img);
div1.appendChild(div2);
cparent.appendChild(div1);
}
setImgLocation(cparent);//創(chuàng)建節(jié)點后重新排列
}
}
}
/*
檢查是否應該加載
*/
function checkLoad(cparent){
var childArray = getChildNodes(cparent);//得到圖片個數(shù)
var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一張圖片距離頂部高度
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//獲得滑動距離(瀏覽器兼容性真煩人)
var browserHeight = document.documentElement.clientHeight;//獲得瀏覽器高度
if(lastImgHight < scrollHeight+browserHeight){//判斷是否加載
return true;
}else {
return false;
}
}
/*
設置圖片個數(shù)及位置排列
*/
function setImgLocation(cparent){
var childArray = getChildNodes(cparent);//得到圖片數(shù)量
var imgWidth = childArray[0].offsetWidth;//獲取照片寬度
var browserWidth = document.documentElement.clientWidth;//獲取瀏覽器寬度
var count = Math.floor(browserWidth/imgWidth);//每行的個數(shù)
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//設置其寬度并居中
//定義數(shù)組,存放第一行照片高度
var imgHArray = [];
//循環(huán)遍歷圖片
for(var i=0;i<childArray.length;i++){
//如果圖片在第一行則獲取高度
if(i<count){
imgHArray[i] = childArray[i].offsetHeight;
}else//否則把最小高度的填充剩余圖片
{
var minHeight = Math.min.apply(null,imgHArray);//獲取最小高度
var minIndex = getMinIndex(minHeight,imgHArray);//獲取最小高度對應的下標
childArray[i].style.position = "absolute";//設置要填充的圖片盒子為絕對布局,否則不能更換位置
childArray[i].style.top = minHeight+"px";//設置要填充圖片距頂高度
childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//設置要填充圖片距左高度
imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把當前位置高度設為兩個圖片相加
//開始下一輪循環(huán)
}
}
}
/*
獲取最小高度對應的下標
*/
function getMinIndex(minHeight,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/*
獲取全部圖片的個數(shù)
*/
function getChildNodes(parent){
var childArray =[];//定義一個數(shù)組存放圖片box
var tempNodes = parent.getElementsByTagName("*");//獲取父節(jié)點下的所有節(jié)點
//循環(huán)添加class為box的節(jié)點
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子節(jié)點
}
希望本文所述對大家學習javascript程序設計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單tab選項卡切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要教大家如何簡單實現(xiàn)js輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)貪吃蛇游戲簡易版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JS取文本框中最小值的簡單實例，有需要的朋友可以參考一下2013-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序抽獎組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)滾動條功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了JavaScript之cookie技術(shù),運用JS設置cookie、讀取cookie、刪除cookie ,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了JavaScript變量類型以及變量作用域的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本文主要介紹了js的三種繼承方式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
js行號顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實現(xiàn)行號顯示的文本框效果，這樣就可以解決讀者很難迅速找到所在某一行的對應代碼，感興趣的小伙伴們可以參考一下2015-10-10