app直播源码，自适应瀑布流布局，masonry.pkgd.min.js插件的使用
1.在页面底部引入imagesloaded.pkgd.min.js
2.同样引入masonry.pkgd.min.js
<style>
.grid {
padding: 20px;
}
.grid__item{
margin-bottom: 20px;
float: left;
width: 220px;
}
.grid__item img {
max-width: 100%
}
</style>
<div class="grid">
<div class="grid__item">
<a href="#">
<img src="img.png" alt="Some image" />
<span>标题标题标题标题</span>
</a>
</div>
<div class="grid__item">
<a href="#">
<img src="img.png" alt="Some image" />
<span>标题标题标题标题</span>
</a>
</div>
<div class="grid__item">
<a href="#">
<img src="img.png" alt="Some image" />
<span>标题标题标题标题</span>
</a>
</div>
</div>
<script>
/*
启用瀑布流
第一种 方式 排列的不局中
如果放不下边缘会留下空白 不建议使用
*/
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.grid__item',
gutter: 20,// 定义内容块之间的距离是 20 像素
isAnimated: true,// 打开动画选项 当改变窗口宽度 或每行显示数量有变化的时候 会有一种动画效果
});
});
});
/*
启用瀑布流
第二种方式 ： 可以居中
改善第一种的不完美
*/
$(function() {
var $objbox = $(".grid");
var gutter = 25; // 定义内容块之间的距离是 20 像素
var centerFunc, $top0;
$objbox.imagesLoaded(function() {
$objbox.masonry({
itemSelector: ".grid > .grid__item",
gutter: gutter,
isAnimated: true // 打开动画选项 当改变窗口宽度 或每行显示数量有变化的时候 会有一种动画效果
});
centerFunc = function() {
$top0 = $objbox.children("[style*='top: 0']");
$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
};
centerFunc();
});
var tur = true;
$(window).resize(function() {
if (tur) {
setTimeout(function() {
tur = true;
centerFunc();
},1000);
tur = false;
}
});
});
</script>
以上就是app直播源码，自适应瀑布流布局，masonry.pkgd.min.js插件的使用， 更多内容欢迎关注之后的文章
标签：function,插件,pkgd,标题,源码,grid,masonry,js From： https://www.cnblogs.com/yunbaomengnan/p/16601825.html