app直播源码，自适应瀑布流布局，masonry.pkgd.min.js插件的使用

1.在页面底部引入imagesloaded.pkgd.min.js

2.同样引入masonry.pkgd.min.js

<style><br>.grid {<br> padding: 20px;<br> }<br>.grid__item{<br> margin-bottom: 20px;<br> float: left;<br> width: 220px;<br> }<br> .grid__item img {<br> max-width: 100%<br>}<br></style><br><div class="grid"><br><div class="grid__item"><br>        <a  href="#"><br>         <img src="img.png" alt="Some image" /><br>         <span>标题标题标题标题</span><br>        </a><br>     </div><br>     <div class="grid__item"><br>        <a  href="#"><br>         <img src="img.png" alt="Some image" /><br>         <span>标题标题标题标题</span><br>        </a><br>     </div><br>     <div class="grid__item"><br>        <a  href="#"><br>         <img src="img.png" alt="Some image" /><br>         <span>标题标题标题标题</span><br>        </a><br>     </div><br></div><br><script><br>/* <br>启用瀑布流<br>第一种 方式 排列的不局中<br> 如果放不下边缘会留下空白 不建议使用<br>*/<br>$(function() {<br>var $container = $('.grid');<br>$container.imagesLoaded(function() {<br>$container.masonry({<br>itemSelector: '.grid__item',<br>gutter: 20,// 定义内容块之间的距离是 20 像素<br>isAnimated: true,// 打开动画选项 当改变窗口宽度 或每行显示数量有变化的时候 会有一种动画效果<br>});<br>});<br>});<br>/*<br>启用瀑布流<br>第二种方式 ： 可以居中<br>改善第一种的不完美<br>*/<br>$(function() {<br>var $objbox = $(".grid");<br>var gutter = 25; // 定义内容块之间的距离是 20 像素<br>var centerFunc, $top0;<br>$objbox.imagesLoaded(function() {<br>$objbox.masonry({<br>itemSelector: ".grid > .grid__item",<br>gutter: gutter,<br>isAnimated: true // 打开动画选项 当改变窗口宽度 或每行显示数量有变化的时候 会有一种动画效果<br>});<br>centerFunc = function() {<br>$top0 = $objbox.children("[style*='top: 0']");<br>$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");<br>};<br>centerFunc();<br>});<br>var tur = true;<br>$(window).resize(function() {<br>if (tur) {<br>setTimeout(function() {<br>tur = true;<br>centerFunc();<br>},1000);<br>tur = false;<br>}<br>});<br>});<br></script>