基于 jquery imagesloaded masonry 实现的瀑布流图片展示
基于 jquery imagesloaded masonry 实现的瀑布流图片展示
最近忙于react和vue开发,冷落了jQuery兄,所以乘着有个闲功夫,完成了个小案例。
顺带吐槽一下,我们的网络环境,哎,也不知道老是防自家人有啥意思。
简述,版本,及插件
原本应该是基于 imagesloaded masonry 和 infinitescroll 或者再加上bootstrap的,由于是练习就省略了。
1, imagesLoaded PACKAGED v4.1.4
2, Masonry PACKAGED v4.2.2
两个jQuery插件的地址
链接:https://pan.baidu.com/s/1S11vmQ7l6q1747DcUExoJQ
提取码:rops
包里没有jQuery,包里没有jQuery,包里没有jQuery
案例
html
<div class="grid"></div>
<script type="text/javascript" src="./jquery2.1.4.min.js"></script>
<script type="text/javascript" src="./masonry.pkgd.js"></script>
<script type="text/javascript" src="./imagesloaded.pkgd@4.js"></script>
css
.grid{
width: 100%;
overflow: hidden;
position: relative;
}
.grid-item{
position: absolute;
left: 0;
top: 0;
}
.grid-item-img{
width: 100%;
}
.grid-item p{
width: 100%;
line-height: 20px;
text-align: center;
border-top: 1px dashed rgba(0, 0, 0, 0.25);
font-size: 16px;
overflow: hidden;
}
js
var winArr = [];// 数据列表,在ajax中获得
var columnN = 50;// 每个小方块的宽度(宽度固定,高度不固定)
var current = 1;// 即将展示第几张图片
var total = 0;// 列表总数
var $container = undefined;// 即将定义的 Masonry 对象
// 展示图片的 function
function appendImg(){
if( current > total ){
alert('没有更多表情了');
}else{
for(let i = current; i < current+20; i++){
if( i < total ){
if( current == 1 ){
$(`
<div class="grid-item" style="width:${columnN+'%'};">
<img class="grid-item-img" data_src="${winArr[i].src}" src="${winArr[i].src}" alt="">
<p>${winArr[i].name}</p>
</div>
`).appendTo($('.grid'))
}else{
var $items = $(`
<div class="grid-item" style="width:${columnN+'%'};">
<img class="grid-item-img" data_src="${winArr[i].src}" src="${winArr[i].src}" alt="">
<p>${winArr[i].name}</p>
</div>
`)
$container = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});
$container.append($items).masonry('appended',$items)
$container.imagesLoaded().progress(function() {
$container.masonry('layout')
})
}
}
}
if(current == 1){
$container = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true
});
$container.imagesLoaded().progress(function() {
$container.masonry('layout')
})
}
current += 20;
// console.log('$container$container$container',$container)
}
}
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop()<=0){
console.log("滚动条已经到达顶部为0");
}
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
console.log("滚动条已经到达底部为" + $(document).scrollTop());
appendImg()
}
});
});