HTML中如何實現瀑布流布局
這篇文章將為大家詳細講解有關HTML中如何實現瀑布流布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都地區(qū)優(yōu)秀IDC服務器托管提供商(創(chuàng)新互聯公司).為客戶提供專業(yè)的成都服務器托管,四川各地服務器托管,成都服務器托管、多線服務器托管.托管咨詢專線：028-86922220
第一種方式：使用JavaScript：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>
*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="main clearfix" id="main">
<div class="box">
<div class="pic"><img src="./images/0.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/1.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/2.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/3.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/4.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/5.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/6.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/7.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/8.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/9.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/10.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/11.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/12.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/13.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/14.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/15(2).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/16(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/17(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/18(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/19(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/20.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/21.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/22.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/23(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/24(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/25(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/26(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/27(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/28(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/29(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/25(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/26(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/27(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/28(1).jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/29(1).jpg"></div>
</div>
</div>
<script>
window.onload = function(){
waterfall('main','box');
//模擬json數據
var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
//監(jiān)聽scroll事件
window.onscroll = function(){
var isPosting = false;
if(checkScollSlide('main','box') && !isPosting){
var oParent = document.getElementById('main');
for(var i in dataJson.data){
isPosting = true;
var oBox = document.createElement('div');
oBox.className = 'box';
oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>';
oParent.appendChild(oBox);
}
isPosting = false;
waterfall('main','box');
}
}
}
/*
* parent 父元素id clsName 塊元素類*/
function waterfall(parent,clsName){
//獲取父元素
var oParent = document.getElementById(parent),
//獲取所有box
aBoxArr = oParent.getElementsByClassName(clsName),
//單個box寬度
iBoxW = aBoxArr[0].offsetWidth,
// 列數
cols = Math.floor(document.documentElement.clientWidth / iBoxW);
oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';
//儲存所有的高度
var hArr = [];
for(var i = 0; i < aBoxArr.length; i++){
if(i < cols){
hArr[i] = aBoxArr[i].offsetHeight;
}else{
//獲取hArr最小值
var minH = Math.min.apply(null,hArr),
// hArr最小值索引index
minHIndex = getMinHIndex(hArr,minH);
aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';
//添加元素之后更新hArr
hArr[minHIndex] += aBoxArr[i].offsetHeight;
}
}
}
//獲取最小值索引
function getMinHIndex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//檢查是否滿足加載數據條件,parent 父元素id clsName 塊元素類
function checkScollSlide(parent,clsName){
var oParent = document.getElementById(parent),
aBoxArr = oParent.getElementsByClassName(clsName),
// 最后一個box元素的offsetTop+高度的一半
lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
//兼容js標準模式和混雜模式
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
height = document.documentElement.clientHeight || document.body.clientHeight;
return lastBoxH < scrollTop + height ? true : false;
}
</script>
</body>
</html>第二種方式：使用jquery：(html結構跟css同上)
$( window ).on( "load", function(){
waterfall('main','box');
//模擬數據json
var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
window.onscroll=function(){
var isPosting = false;
if(checkscrollside('main','box') && !isPosting){
isPosting = true;
$.each(dataJson.data,function(index,dom){
var $box = $('<div class="box"></div>');
$box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
$('#main').append($box);
waterfall('main','box');
isPosting = false;
});
}
}
});
/*
parend 父級id
clsName 元素class
*/
function waterfall(parent,clsName){
var $parent = $('#'+parent);//父元素
var $boxs = $parent.find('.'+clsName);//所有box元素
var iPinW = $boxs.eq( 0 ).width()+15;// 一個塊框box的寬
var cols = Math.floor( $( window ).width() / iPinW );//列數
$parent.width(iPinW * cols).css({'margin': '0 auto'});
var pinHArr=[];//用于存儲 每列中的所有塊框相加的高度。
$boxs.each( function( index, dom){
if( index < cols ){
pinHArr[ index ] = $(dom).height(); //所有列的高度
}else{
var minH = Math.min.apply( null, pinHArr );//數組pinHArr中的最小值minH
var minHIndex = $.inArray( minH, pinHArr );
$(dom).css({
'position': 'absolute',
'top': minH + 15,
'left': $boxs.eq( minHIndex ).position().left
});
//添加元素后修改pinHArr
pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了塊框后的列高
}
});
}
//檢驗是否滿足加載數據條件，即觸發(fā)添加塊框函數waterfall()的高度：最后一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載)
function checkscrollside(parent,clsName){
//最后一個塊框
var $lastBox = $('#'+parent).find('.'+clsName).last(),
lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
scrollTop = $(window).scrollTop(),
documentH = $(document).height();
return lastBoxH < scrollTop + documentH ? true : false;
}第三種方式：使用css：(html結構同上)
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
[color=#ff0000]-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;[/color]
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}瀑布流實現方式比較：
Javascript原生方式/jquery方式
1、需要計算，列數 = 瀏覽器窗口寬度/圖片寬度，圖片定位是根據每一列的高度計算下來圖片的位置；
2、圖片排序是按照圖片計算的位置橫向排列，位置是計算出來的，比較規(guī)范
Css方式
1、不需要計算，瀏覽器自動計算，只需設置列寬，性能高；
2、列寬隨著瀏覽器窗口大小進行改變，用戶體驗不好；
3、圖片排序按照垂直順序排列，打亂圖片顯示順序；
4、圖片加載還是依靠javascript/jquery實現
關于“HTML中如何實現瀑布流布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
文章題目：HTML中如何實現瀑布流布局
網頁地址：http://www.muchs.cn/article2/piepic.html
成都網站建設公司_創(chuàng)新互聯，為您提供網頁設計公司、域名注冊、定制網站、虛擬主機、網站設計、網站維護
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯
- 響應式網站的優(yōu)勢與弊端有哪些？ 2021-02-16
- 成都中小企業(yè)在建設響應式網站中會遇到哪些難題？ 2016-11-08
- 什么是響應式設計？響應式網站建設有什么優(yōu)勢？ 2013-04-30
- 就這樣一個響應式網站開發(fā)，據說難道一群程序員，有這么難嘛! 2022-08-27
- 如何建立一個響應式網站 2016-10-27
- 什么是響應式網站設計？有什么好處？ 2016-08-29
- 響應式網站真的符合用戶需求嗎？ 2023-01-26
- 手機網站和PC網站及響應式網站開發(fā)的不同點 2015-03-17
- 到底什么是響應式網站建設 2016-08-23
- 建響應式網站如何為企業(yè)大開方便之門 2022-08-04
- 響應式網站設計必須考慮網站內容 2022-10-01
- 響應式網站的好處 2015-09-25