CSS部分
#mid .item { 180px; padding: 0px; margin: 0 0 10px; background: #eee; } .item img { 100%; } .item a { margin-right:1rem; } .mid { margin: 0 auto; } .item p { padding: 1px 0px; font-size: 12px; text-align: center; color: #333; white-space: normal; 100%; }
HTML部分
<div id="mid" class="js-masonry mid"> <div class="item"> <a href="#"><img src="/pic/test/1.jpeg"></a> <p>11111111111111111111</p> <p><a class="am-badge am-badge-primary" href="#">航拍图</a><a class="am-badge am-badge-primary" href="##">CAD图</a></p> </div> <div class="item"> <a href="#"><img src="/pic/test/2.jpeg"></a> <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p> </div> <div class="item"> <a href="#"><img src="/pic/test/3.jpeg"></a> <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p> </div> <div class="item"> <a href="#"><img src="/pic/test/4.jpeg"></a> <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p> </div> <div class="item"> <a href="#"><img src="/pic/test/5.jpeg"></a> <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p> </div> <div class="item"> <a href="#"><img src="/pic/test/1.jpeg"></a> <p>【乖怪蜜桃.搭搭配】~貂绒嫁到~今年好流行的材质呢~跟风购入~颜色质感都好喜欢de 说呢~重点还很保暖</p> </div> </div>
JS启动部分
var container = document.querySelector('#container'); var msnry = new Masonry(container, { // options... itemSelector: '.item', columnWidth: 180 }); masonryWidth(); //鼠标在上样式 $(function () { $(".item").hover(function () { $(this).css("background-color", "#ddd"); },function () { $(this).css("background-color", "#eee"); }); }); function masonryWidth() { var w1 = document.body.clientWidth; var box = 180; var w2 = w1 - (w1 % box); $("#mid").width(w2); // 浏览器窗口变动 window.onresize = masonryWidth; }