樓主您好
站在用戶的角度思考問題，與客戶深入溝通，找到瓊中黎族網(wǎng)站設(shè)計與瓊中黎族網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋瓊中黎族地區(qū)。
引入infinitescroll
頁面元素
div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0px 10px 0px 10px;"
!--列表標題--
div class="am-list-news-bd"
ul class="am-list block" id="container"/ul
/div
/div
div class="loading" style="text-align:center;"
/div
div id="navigation"
a/a
/div
初始化
var navigationUrl = "xxxx?pageNo=1";
$("#navigation a").attr("href", navigationUrl);
$.ajax({
url: 'xxxx',
type: 'post',
dataType:'json',
success: function(items) {
var html = successCallBack(items);//渲染每一個瀑布流塊
$('#container').html(html);
},
error: function() {
alert('加載失敗');
}
});
初始化方法調(diào)用
$('#container').infinitescroll({
navSelector : "#navigation", //導航的選擇器，會被隱藏
nextSelector : "#navigation a", //包含下一頁鏈接的選擇器
itemSelector : ".block", //你將要取回的選項(內(nèi)容塊)
debug : true, //啟用調(diào)試信息
animate : true, //當有新數(shù)據(jù)加載進來的時候，頁面是否有動畫效果，默認沒有
extraScrollPx : 150, //滾動條距離底部多少像素的時候開始加載，默認150
bufferPx : 40, //載入信息的顯示時間，時間越大，載入信息顯示時間越短
errorCallback : function() {
//alert('error');
}, //當出錯的時候，比如404頁面的時候執(zhí)行的函數(shù)
localMode : true, //是否允許載入具有相同函數(shù)的頁面，默認為false
dataType : 'json',//可以是json
template: function(items) {
itemsTemp = items;
return successCallBack(items);
},
loading : {
img: '${ctx}/images/loading.gif',
msgText : "加載中...",
finishedMsg : '沒有新數(shù)據(jù)了...',
selector : '.loading' // 顯示loading信息的div
}
}, function() {
});
jquery masonry 瀑布流居中
itemSelector class選擇器,默認'.item'，這個表示每個塊的選擇器
columnWidth 一列的寬度
isAnimated 使用jquery的布局變化,默認true
animationOptions animate屬性漸變效果(Object { queue: false, duration: 500 })
gutterWidth 列的間隙 Integer
isFitWidth 自適應(yīng)瀏覽器寬度Boolean
isResizableL 是否可調(diào)整大小 Boolean
isRTL 使用從右到左的布局 Boolean
itemSelector class選擇器,默認'.item'，這個表示每個塊的選擇器
columnWidth 一列的寬度
isAnimated 使用jquery的布局變化,默認true
animationOptions animate屬性漸變效果(Object { queue: false, duration: 500 })
gutterWidth 列的間隙 Integer
isFitWidth 自適應(yīng)瀏覽器寬度Boolean
isResizableL 是否可調(diào)整大小 Boolean
isRTL 使用從右到左的布局 Boolean
2、jquery.infinitescroll，有了瀑布流布局，我們還需要一個動態(tài)加載的功能，也就是瀏覽器滾動條滾動到底部的時候，需要動態(tài)加載數(shù)據(jù)，這里介紹使用分頁的方式加載數(shù)據(jù)，插件名稱為jquery.infinitescroll，官網(wǎng)地址為：，詳細說明可以到官網(wǎng)查看，這里介紹他的一些核心的參數(shù)
itemSelector class選擇器,默認'div.post'，這個表示上面介紹的瀑布流的塊的選擇器
nextSelector 表示分頁中下一頁的選擇器，默認為div.navigation a:first
navSelector 表示分頁導航的選擇器，分頁導航會被隱藏
extraScrollPx 滾動條距離底部多少像素的時候開始加載，默認150
dataType 表示動態(tài)加載返回數(shù)據(jù)的格式，默認html
template 表示返回json時，用來生成瀑布流塊html代碼的模板方法，如果返回是json，那么必須指定這個參數(shù)，否則會報錯
思路分析
步驟一:構(gòu)建成行元素?+?尋找新增元素追加位置
瀑布流所有元素的寬度是固定的,我們用瀏覽器的寬度除以每個瀑布流塊的寬度,就是每一行可容納的瀑布流塊的個數(shù).因為,每個瀑布流塊的高度不一,我們姑且把組成一行的這組元素稱為成行元素,在成行元素放置完畢后,我們?nèi)绻僭黾右粋€元素,那么它的位置應(yīng)該這樣找?
“獲取成行元素集合中高度最低的那個元素,待放置的元素的top值應(yīng)該是這個最低元素的高,left值應(yīng)該是這個最低元素的left值”
這樣,新增的這一個元素我們就找到了它存放的位置.這樣成行元素中的最低高度值就變?yōu)榱嗽瓉淼母叨?新增元素的高度.
步驟二:重復步驟一,依賴成行元素追加新元素
步驟一中我們已經(jīng)實現(xiàn)了一次成行元素追加一個新的元素,這樣新元素增加之后我們就構(gòu)建了新的成行元素,之后的操作就是在新的成行元素中追加新元素,原理同步驟一.
!doctype html
meta charset="UTF-8"
title瀑布流效果實現(xiàn)
script type="text/javascript" src="scripts/jquery-1.8.2.min.js"
script type="text/javascript" src="scripts/jquery.easydrag.handler.beta2.js"
script type="text/javascript"
? window.onload=function(){
//獲取父級對象
? ? var oParent = document.getElementById("main");
? ? //獲取父級[第一個參數(shù)]下的所有的子元素[按照第二個參數(shù)匹配]
? ? var aPin =getClassObject(oParent,"pin");
? ? //獲取每一個塊的寬度
? ? var iPinW = aPin[0].offsetWidth;
? ? // //計算每行放多少個pin(瀑布流塊)頁面的寬度/每一個瀑布流塊的寬度
? ? var num = Math.floor(document.documentElement.clientWidth/iPinW);
? ? //重置父級的樣式,這樣保證圖片整體居中
? ? oParent.style.cssText="width:" + num*iPinW +"px;margin:0 auto;";
? ? var compareArray = [];
? ? //遍歷獲取到的所有瀑布流塊
? ? for (var i =0; i
if(i
//成行元素
? ? ? ? compareArray[i] = aPin[i].offsetHeight;
? ? ? }else{
//獲取成行元素中高度最低的值
? ? ? ? var minHeight = Math.min.apply('',compareArray);
? ? ? ? //alert(compareArray + ",min=" + minHeight);
//獲取成行元素中高度最低元素的索引
? ? ? ? var minHkey =getMinHeightKey(compareArray,minHeight);
? ? ? ? //為新增的瀑布流塊設(shè)置定位
? ? ? ? aPin[i].style.position ="absolute";
? ? ? ? aPin[i].style.top = minHeight +"px";
? ? ? ? //設(shè)定新增加的瀑布流塊的top和left
? ? ? ? aPin[i].style.left =aPin[minHkey].offsetLeft +"px";
? ? ? ? //將該索引位置的高度改變?yōu)樾略龊蟮母叨萚原來瀑布流塊的高度+新增的瀑布流塊的高度]
? ? ? ? compareArray[minHkey] += aPin[i].offsetHeight;
? ? ? }
}
}
/**
*? ? 獲取parent下所有樣式名為className的對象集合
*/
? function getClassObject(parent,className){
var obj = parent.getElementsByTagName("*");
? ? var result = [];
? ? for(var i=0; i
//變量如果匹配className,將匹配的對象放入數(shù)組
? ? ? if(obj[i].className==className){
result.push(obj[i]);
? ? ? }
}
return result;
? }
/**
*? ? 獲取arr數(shù)組中值為minH的值在數(shù)組中的索引
*/
? function getMinHeightKey(arr,minH){
for(key in arr){
if(arr[key] == minH){
return key;
? ? ? }
}
}
style type="text/css"
? ? /*設(shè)置每一個瀑布流塊*/
? ? #main .pin{
width:220px;
? ? ? ? height:auto;
? ? ? ? padding:15px 0px 0px 15px; /*上 右 下 左*/
? ? ? ? float:left;
? ? }
/*設(shè)置每一個瀑布流塊中的圖像樣式*/
? ? #main .pin .box{
width:200px;
? ? ? ? height:auto;
? ? ? ? padding:10px;
? ? ? ? background:#FFF;
? ? ? ? border:1px solid #ccc;
? ? ? ? box-shadow:0px 0px 6px #ccc; /*中間投影*/
? ? ? ? border-radius:5px; /*圓角*/
? ? }
#main .pin .box img{
width:200px;
? ? }
div id="main"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/1.webp"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/2.webp"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/3.webp"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/4.webp"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/5.webp"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/6.webp"
div class="pin"
? ? div class="box"
? ? ? ? img src="images/7.webp"
/html
重慶分公司
重慶分公司
