瀑布流+图片轮播

1、Html

<div class="container">
<!-- 瀑布流 -->
<section class="gallery">

<div>
<a href="images/2018042323330224.jpg" data-caption=""> <img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019041716305351.jpg" data-caption=""> <img src="images/2019041716305351.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019061814195854.jpg" data-caption=""> <img src="images/2019061814195854.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu2.jpg" data-caption=""> <img src="images/pu2.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018042323330224.jpg" data-caption=""> <img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019041716305351.jpg" data-caption=""> <img src="images/2019041716305351.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>

<div>
<a href="images/2019061814195854.jpg" data-caption=""> <img src="images/2019061814195854.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu2.jpg" data-caption=""> <img src="images/pu2.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018042323330224.jpg" data-caption=""><img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019041716305351.jpg" data-caption=""> <img src="images/2019041716305351.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019061814195854.jpg" data-caption=""> <img src="images/2019061814195854.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu2.jpg" data-caption=""> <img src="images/pu2.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018042323330224.jpg" data-caption=""> <img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>

<div>
<a href="images/2018042323330224.jpg" data-caption=""> <img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019041716305351.jpg" data-caption=""> <img src="images/2019041716305351.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019061814195854.jpg" data-caption=""> <img src="images/2019061814195854.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu2.jpg" data-caption=""> <img src="images/pu2.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018042323330224.jpg" data-caption=""> <img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019041716305351.jpg" data-caption=""> <img src="images/2019041716305351.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>

<div>
<a href="images/2019061814195854.jpg" data-caption=""> <img src="images/2019061814195854.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu2.jpg" data-caption=""> <img src="images/pu2.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018042323330224.jpg" data-caption=""><img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019041716305351.jpg" data-caption=""> <img src="images/2019041716305351.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019052810404326.jpg" data-caption=""> <img src="images/2019052810404326.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2019061814195854.jpg" data-caption=""> <img src="images/2019061814195854.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu2.jpg" data-caption=""> <img src="images/pu2.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018030615073612.jpg" data-caption=""> <img src="images/2018030615073612.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/2018042323330224.jpg" data-caption=""> <img src="images/2018042323330224.jpg" alt="First image" />
</a>
</div>
<div>
<a href="images/pu1.jpg" data-caption=""> <img src="images/pu1.jpg" alt="First image" />
</a>
</div>
</section>
<!-- 瀑布流 -->
</div>

2、CSS

<style>
.container .gallery div{
transition: all 0.8s;
transform: translateY(80%);
/*opacity: 0; */ /*有上移的动画效果*/
display:none;
}
/*动画*/
.imgTran{
transition:all 0.3s !important;
transform: translateX(0) !important;
/*opacity: 1 !important;*/ /*有上移的动画效果*/
display:block !important;
animation: move_center 1s forwards;
}

@keyframes move_center{
0%{transform:translateY(-50%) scale(0);}
100%{transform: translateY(0%) scale(1);}
/*0%{transform: translateY(80%);}*/
/*100%{transform: translateY(0);}*/
}
</style>

3、JS

<script>
baguetteBox.run('.gallery', {
// 配置参数
buttons:Boolean,//是否显示导航按钮。
noScrollbars:true,//是否在显示时隐藏滚动条。
titleTag:true,//是否使用图片上的title属性作为图片
async:false,//是否异步加载文件。

afterShow:function(){//显示遮罩层之后的回调函数。
$(".pressing").fadeIn();
},
afterHide:function(){//隐藏遮罩层之后的回调函数。
$(".pressing").fadeOut();
}
//preload:5 预加载多少个文件。
// onChange: function(currentIndex, imagesCount){} 图片改变时的回调函数
// overlayBackgroundColor:'rgba(0,0,0,0.8)' 遮罩层的背景颜色
});

$(function(){

$(".allnews").click(function () {
$("#allcon").css("height", "auto");
$(this).hide(1000);
});
})
</script>
<script type="text/javascript">
//进入页面初次加载的数据12笔
$(document).ready(function(){
for(e=0;e<12;e++){
$(".container .gallery").find("div").eq(e).addClass("imgTran");
}
});
$(function(){
// console.log($(".container .gallery div").length);
// var page_num = 1; //默认加载的页数
var totalHeight = 0; //定义一个总高度变量
var total = 12; //加载数据笔数
function ata(){ //loa动态加载数据
//page_num += 1;
totalHeight = parseFloat( $(window).height() ) + parseFloat( $(window).scrollTop()); //浏览器的高度加上滚动条的高度
//console.log($(window).height());
// console.log($(window).scrollTop());
// console.log($(document).height());
if ( $(document).height() <= totalHeight ) { //当文档的高度小于或者等于总的高度时，开始动态加载数据
var tranNum = $(".container .gallery .imgTran").length; //获取当前imgTran总数
for(e=tranNum;e<(tranNum+total);e++){
$(".container .gallery").find("div").eq(e).addClass("imgTran");
// for(b=1;b<=12;b++){
//( total - ( (tranNum+total) - e) ) move_center 1s forwards
$(".container .gallery").find("div").eq(e).css("animation","move_center "+((( total - ( (tranNum+total) - e)+1) )*0.3)+"s forwards");
//console.log(aaa);
// }
}
}
}
$(window).scroll(function(){
ata();
})
})
</script>

效果：