jQuery实现动态加载瀑布流

<div class="container">
 <div class="box">
 <div class="content"><img src="./image/1.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/2.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/3.jpg" alt=""></div>
 </div>

 </div>
</div>

* {
 padding: 0;
 margin: 0;
 }

 .box {
 position: relative;
 float: left;
 margin: 10px;
 }

 .content {
 padding: 15px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 10px;
 }

 .content img {
 width: 200px;
 height: auto;
 }

<script>
 $(function () {
 //jQuery代码
 imgLocation()
 
 function imgLocation() {
 var box = $('.box')
 var num = Math.floor($(window).width() / box.eq(0).width())
 var boxHeights = []
 box.each(function (index, value) {
 var boxHeight = box.eq(index).height()
 if (index < num) {
 boxHeights[index] = boxHeight
 } else {
 var minHeight = Math.min.apply(null, boxHeights)
 var minIndex = $.inArray(minHeight, boxHeights)
 $(value).css({
 'position': 'absolute',
 'top': minHeight,
 'left': box.eq(minIndex).position().left
 });
 boxHeights[minIndex] += box.eq(index).height()
 }
 })
 }
 })
</script>

var dataImg = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }
 window.onscroll = function () {
 if (scrollside()) {
 $.each(dataImg.data, function (index, value) {
 var html = `<div class="box">
 <div class="content"><img src="./image/${value.src}" alt=""></div>
 </div>`
 $(html).appendTo($('.container'))
 })
 imgLocation()
 }
 }
 function scrollside() {
 var box = $('.box')
 var lastboxHeight = box.last().get(0).offsetTop
 var documentHeight = document.body.scrollHeight + 130
 var scrollHeight = $(document).scrollTop()
 console.log(lastboxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }


oxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }