在百度上看见的好多都是引用Masonry插件 ，之后我自己尝试了一个没有使用插件的
<body> <div id="main"> <div class="box"> <div class="pic"> <img src="../picture/1.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/2.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/3.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/4.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/5.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/6.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/2.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/4.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/5.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/6.png"> </div> </div> <div class="box"> <div class="pic"> <img src="../picture/2.png"> </div> </div> </div> </body>
下面是全部的css比较简单
<style> * { margin: 0; padding: 0; } #main { position: relative; width: 900px; margin: 0 auto; } .box { padding: 15px 0 0 15px; float: left; } .pic img { width: 165px; height: auto; } </style>
最重要的这一段啦
<script> $(window).on('load', function() { waterfall(); var dataInt = { "data": [{ "src": "../picture/1.png" }, { "src": "../picture/2.png" }, { "src": "../picture/3.png" }] }; }) function waterfall() { var $boxs = $('#main>div'); var w = $boxs.eq(0).outerWidth(); var cols = Math.floor($(window).width() / w); $('#main').width(w * cols).css('margin', '0 auto'); var hArr = []; $boxs.each(function(index, value) { var h = $boxs.eq(index).outerHeight(); if (index < cols) { hArr[index] = h; } else { var minH = Math.min.apply(null, hArr); var minHIndex = $.inArray(minH, hArr); $(value).css({ 'position': 'absolute', 'top': minH + 'px', 'left': minHIndex * w + 'px' }) hArr[minHIndex] += $boxs.eq(index).outerHeight(); } }) } </script>
下面这段jq 是可以根据鼠标轮播 下拉加载页面
<script> $(window).on('load', function() { waterfall(); var dataInt = { "data": [{ "src": "../picture/1.png" }, { "src": "../picture/2.png" }, { "src": "../picture/3.png" }] }; $(window).on('scroll', function() { if (checkScrollSlide) { $.each(dataInt.data, function(key, value) { var oBox = $('<div>').addClass('box').appendTo($('#main')); var oPic = $('<div>').addClass('pic').appendTo($(oBox)); var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic)); }) waterfall(); } }) }) function waterfall() {
var $boxs = $('#main>div');//包含选择器， 空格选择器会选择所有的子元素 ，> 取mian元素的第一个子元素 var w = $boxs.eq(0).outerWidth();// 列宽 width（）只能获得图片的宽度，outerWidth（）能获得包括边界的宽度
var cols = Math.floor($(window).width() / w); $('#main').width(w * cols).css('margin', '0 auto'); var hArr = []; $boxs.each(function(index, value) { var h = $boxs.eq(index).outerHeight();// 获取每个图片的高 if (index < cols) { hArr[index] = h;// 获取第一行的高度 } else { var minH = Math.min.apply(null, hArr);// 获取最矮图片的索引 var minHIndex = $.inArray(minH, hArr);inArray函数能获取指定数值的索引 console.log(value); $(value).css({ 'position': 'absolute', 'top': minH + 'px', 'left': minHIndex * w + 'px' }) hArr[minHIndex] += $boxs.eq(index).outerHeight(); } }) } function checkScrollSlide() { var $lastBox = $('#main>div').last();// 获取最后一个图片 var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);// 最后一个图片距离父元素的高度和自身一半的高度 var scrollTop = $(window).scrollTop();// 划过的高度 var documentH = $(window).height();//浏览器的高度 return (lastBoxDis < scrollTop + documentH) ? true : false; } </script>
两个js的 区别：前者没有下拉加载效果 后者有下拉加载效果