Jquery ウォーターフォール フロー plug-in_jquery の使用の概要

滝の流れのレイアウトの簡単な分析

ウォーターフォール フロー Web ページの実装で個人が遭遇する問題と解決策についての簡単な説明

Toss: ウォーターフォール フロー レイアウト (複数列リストの流体レイアウトに基づいて実装)

JavaScript ウォーターフォール フロー、主要なウォーターフォール フローの簡単な分析と提案

私はjqueryをよく使うので、滝の流れをプラグイン化することを思いつきました。Xunlei UEDから美しい写真を拝借しましょう。

まず見てみましょうデモ

コードを公開します

コードをコピーします コードは次のとおりです:

;(function($){
var
//参数
setting={
column_width:204,//列宽
column_className:'waterfall_column',//列的类名
column_space:10,//列间距
cell_selector:'.cell',//要排列的砖块的选择器，限定在瀑布流的容器内
img_selector:'img',//要加载的图片的选择器
auto_imgHeight:true,//是否需要自动计算图片的高度
fadein:true,//是否渐显载入
fadein_speed:600,//渐显速率，单位毫秒
insert_type:1, //砖块插入方式，1为插入最短那列，2为按序轮流插入
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
},
//
waterfall=$.waterfall={},
$container=null;//容器
waterfall.load_index=0, //加载次数
$.fn.extend({
waterfall:function(opt){
opt=opt||{};
setting=$.extend(setting,opt);
$container=waterfall.$container=$(this);
waterfall.$columns=creatColumn();
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
waterfall._scrollTimer2=null;
$(window).bind('scroll',function(){
clearTimeout(waterfall._scrollTimer2);
waterfall._scrollTimer2=setTimeout(onScroll,300);
});
waterfall._scrollTimer3=null;
$(window).bind('resize',function(){
clearTimeout(waterfall._scrollTimer3);
waterfall._scrollTimer3=setTimeout(onResize,300);
});
}
});
function creatColumn(){//创建列
waterfall.column_num=calculateColumns();//列数
//循环创建列
var html='';
for(var i=0;ihtml+='

';
}
$container.prepend(html);//列を挿入
return $('.' settings.column_className,$container);//列コレクション
}
function CalculateColumns(){//必要な列数を計算します
var num=Math.floor(($container.innerWidth())/(setting.column_width settings.column_space)); ) { num=1; } // 少なくとも 1 つの列を確保します
return num;
}
function render(elements,fadein){// 要素をレンダリングします
if(!$(elements). length) return;//要素なし
var $columns = Waterfall.$columns
$(elements).each(function(i){
if(!setting.auto_imgHeight||setting.insert_type= =2 ){//画像の高さが指定されている場合、または順番に挿入されている場合、画像がロードされるのを待たずに列の高さを計算できます
if(setting.insert_type==1){
insert($( elements).eq(i),setting.fadein&&fadein);//要素を挿入
}else if(setting.insert_type==2){
insert2($(elements).eq(i) ,i,setting .fadein&&fadein);//要素を挿入
}
return true;//続行
}
if($(this)[0].nodeName.toLowerCase()==' img'|| $(this).find(setting.img_selector).length>0){//それ自体が画像であるか、画像が含まれています
var image=new Image; [0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src'); .onload=function() {//画像のロード後にサイズを自動的に計算できます
image.onreadystatechange=null;
if(setting.insert_type==1){
insert($(elements) ).eq(i),setting.fadein&&fadein);//要素を挿入
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting. fadein&&fadein);//要素を挿入
}
image=null;
}
image.onreadystatechange=function(){//IE などのブラウザのキャッシュ問題を処理します。onload イベントは無効になります。画像がキャッシュされた後にトリガーされるようになりました
if(image .readyState == "complete"){
image.onload=null;
if(setting.insert_type==1){
insert( $(elements).eq(i),setting.fadein&&fadein) ;//要素を挿入
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i ,setting.fadein&&fadein);//要素を挿入
}
image=null;
}
image.src=src; //考慮する必要はありません画像読み込み
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//要素を挿入
}else if(setting.insert_type= =2){
insert2($(elements).eq( i),i,setting.fadein&&fadein);//要素を挿入
}
}
}
function public_render(elem){//非同期データ レンダリング インターフェース function
render(elem,true);
}
function insert($element,fadein){//要素を最も短い列に挿入します
if(fadein){//フェードイン
$element.css ('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
}else{//フェードインしない
$element.appendTo (waterfall.$columns.eq(calculateLower()));
}
}
function insert2($element, i,fadein){//要素を順番に挿入します。
if(fadein) {//Fade
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall. column_num)).fadeTo(setting.fadein_speed,1);
} else{//フェードインしない
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num)); >}
}
function CalculateLower(){// その列のインデックスを最短で計算します
var min=waterfall.$columns.eq(0).outerHeight(),min_key=0; >waterfall.$columns.each(function(i){
if($ (this).outerHeight()min=$(this).outerHeight();
min_key= i;
}
});
return
}
関数 getElements(){//
$.waterfall.load_index; ($.waterfall.load_index,public_render);
}
waterfall. _scrollTimer=null;//遅延スクロール読み込みタイマー
関数 onScroll(){//スクロール読み込み
clearTimeout(waterfall._scrollTimer) ;
waterfall._scrollTimer=setTimeout(function(){
var $lowest_column=waterfall.$columns.eq(calculateLowest());//最も短い列
varbottom=$lowest_column.offset() .top $lowest_column.outerHeight();//最も短い列の下部とブラウザ ウィンドウの上部の間の距離 距離
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop||0 ;//スクロール バーの距離
var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0 ;//ウィンドウの高さ
if(scrollTop>=bottom-windowHeight){
render( getElements(),true);
}
},100);
}
関数 onResize(){//ウィンドウがズームされたときに再配置します
if(calculateColumns()==waterfall .column_num) return; //列の数は変更されていないため、再配置する必要はありません
var $cells=waterfall.$container. find(setting.cell_selector);
waterfall.$columns=creatColumn();
render($cells,false) // 既存の要素を強制的にフェードアウトしないようにします
}
})(jQuery);

コードを貼り付ける形式が少し汚いようなので、今回は気にしません。上記のコードがはっきりと見えない場合は、デモ ページでソース ファイルを直接表示できます。
プラグインの使用方法:




コードをコピーします


コードは次のとおりです:

$(selector).waterfall(opt); //selector はウォーターフォール フロー コンテナーのセレクター、opt は構成パラメーター オブジェクトです

必要な HTML 構造: HTML 構造は空にすることができます

などのコンテナ要素、内部のブリック要素は動的にロードされます。もちろん、デモページに

などのブロックを事前に配置することもできます。コード をコピーします。コードは次のとおりです。

;

00

01

02

div class="cell">

03

< img src="P_004.jpg" / >

04

;

05

06

07

div class="cell">

08

< img src="P_009.jpg" / >

09

;

10

11

12

div class="cell">

13

< img src="P_014.jpg" / >

14

;

15

16

17

< div class="cell">

18

< img src="P_019.jpg" / >

19