jQuery砌体和infinitescroll两瀑布流插件使最流行的瀑布流的图片显示的例子。它显示了由鼠标加载的瀑布状图像，用户可以无限浏览图片或内容以无限加载瀑布效应。

代码uff1a



功能item_masonry（）{
$（'。项目IMG）。负荷（函数（）{）
$（'。infinite_scroll的砌体（{）。
itemselector：masonry_brick '，
ColumnWidth：226，
GutterWidth：15
}）；
}）；

$（'。infinite_scroll的砌体（{）。
itemselector：masonry_brick '，
ColumnWidth：226，
GutterWidth：15
}）；
}

$（函数（）{（））

功能item_callback（）{

$（'项目'），Mouseover（function（）{）
$（这）。Css（'box-shadow，0 1px 5px RGBA（35,25,25,0.5））；
$（'。BTNs '，这表明（））；
}）。Mouseout（function（）{）
$（这）。Css（'box-shadow，0 1px 3px RGBA（34,25,25,0.2））；
$（'。BTNs '，这隐藏（））；
}）；

item_masonry（）；

}

item_callback（）；

$（'项目'）FadeIn（）；

var＝1

$（。infinite_scroll）。Infinitescroll（{
NavSelector：#更多
nextselector：#更
itemselector：项目

加载：{
IMG：图像/ masonry_loading_1 GIF 。
msgtext：，
finishedmsg：木有，
完成：函数（）{
sp＋；
如果（SP = 10）{事件结束到第第十页
$（#更）删除（）；
$（# infscr加载）隐藏（）；
$（#页）显示（）；
$（窗口），Unbind（'。infscr）；
}
}
}，{ errorCallback：功能（）（）
$（#页）显示（）；
}

}，{功能（元素）
VaR newelems =美元美元（元素）；
$（'。infinite_scroll）。Masonry（'appended，newelems美元，假）；
newelems.fadein美元（）；
item_callback（）；
返回；
}）；

}）；



演示图片



以上是本文的全部内容，希望对您学习jQuery有帮助。