图片瀑布流的实现
效果图：
一、满足功能的实现（低端版：js有全部变量）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流</title> 6 <style> 7 .content { 8 margin: 0 auto; 9 width: 1000px; 10 background-color: gainsboro; 11 } 12 13 .left { 14 float: left 15 } 16 17 .item { 18 width: 25%; 19 text-align: center; 20 } 21 22 .border { 23 border: 1px solid red; 24 } 25 26 img { 27 width: 230px; 28 } 29 30 .clearfix:after { 31 content: "clear"; 32 clear: both; 33 display: block; 34 visibility: hidden; 35 height: 0; 36 } 37 </style> 38 </head> 39 <body> 40 <h1>瀑布流美女</h1> 41 <div class="content clearfix"> 42 <div class="left item"></div> 43 <div class="left item"></div> 44 <div class="left item"></div> 45 <div class="left item"></div> 46 </div> 47 <script src="/static/js/jquery-1.11.0.js"></script> 48 <script> 49 $(function () { 50 initImg(); 51 scrollEvent(); 52 }) 53 NID = 0 54 LASTPOSITION=3 //记录图片放置位置 55 function initImg() { 56 $.ajax({ 57 url: "get_imgs.html", 58 type: "GET", 59 data: {"id": NID}, 60 dataType: "json", 61 success: function (arg) { 62 $.each(arg, function (index, v) { 63 eqv=(index+LASTPOSITION+1) % 4 64 tag = document.createElement("img"); 65 tag.src = "/" + v.href; 66 $(".content").children().eq(eqv).append(tag) 67 if (index + 1 == arg.length) { 68 {#NID=arg.length;#} 69 LASTPOSITION=eqv; 70 } 71 }) 72 } 73 }) 74 } 75 76 function scrollEvent() { 77 $(window).scroll(function () { 78 //文档高度 79 var docLength = $(document).height(); 80 //窗口高度 81 var winLength = $(window).height(); 82 //滚动条滚动高度 83 var scrollLength = $(window).scrollTop(); 84 {#console.log(docLength, winLength, scrollLength, parseInt(winLength + scrollLength+1))#} 85 if (winLength+scrollLength+1>=docLength) { //此处scrollLength是小数，所以不能直接等于 86 {#alert("ok")#} 87 initImg(); 88 {#console.log(5)#} 89 } 90 }) 91 } 92 </script> 93 </body> 94 </html>
1 from django.shortcuts import render,HttpResponse,redirect 2 from app01 import models 3 import json 4 # Create your views here. 5 def waterfall(request): 6 return render(request,"waterfall.html") 7 8 9 def get_imgs(request): 10 NID=request.GET.get("id") 11 img_list=models.Img.objects.filter(id__gt=NID).values("id","name","href") 12 return HttpResponse(json.dumps(list(img_list)))
二、优化版本（js无全局变量）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流</title> 6 <style> 7 .content { 8 margin: 0 auto; 9 width: 1000px; 10 background-color: gainsboro; 11 } 12 13 .left { 14 float: left 15 } 16 17 .item { 18 width: 25%; 19 text-align: center; 20 } 21 22 .border { 23 border: 1px solid red; 24 } 25 26 img { 27 width: 230px; 28 } 29 30 .clearfix:after { 31 content: "clear"; 32 clear: both; 33 display: block; 34 visibility: hidden; 35 height: 0; 36 } 37 </style> 38 </head> 39 <body> 40 <h1>瀑布流美女</h1> 41 <div class="content clearfix"> 42 <div class="left item"></div> 43 <div class="left item"></div> 44 <div class="left item"></div> 45 <div class="left item"></div> 46 </div> 47 <script src="/static/js/jquery-1.11.0.js"></script> 48 <script> 49 $(function () { 50 var obj=new scrollImg(); 51 obj.initImg(); 52 obj.scrollEvent(); 53 }) 54 55 function scrollImg() { 56 this.NID = 0 57 this.LASTPOSITION = 3 //记录图片放置位置 58 this.initImg = function () { 59 var that = this; 60 $.ajax({ 61 url: "get_imgs.html", 62 type: "GET", 63 data: {"id": that.NID}, 64 dataType: "json", 65 success: function (arg) { 66 $.each(arg, function (index, v) { 67 eqv = (index + that.LASTPOSITION + 1) % 4 68 tag = document.createElement("img"); 69 tag.src = "/" + v.href; 70 $(".content").children().eq(eqv).append(tag) 71 if (index + 1 == arg.length) { 72 {#NID=arg.length;#} 73 that.LASTPOSITION = eqv; 74 } 75 }) 76 } 77 }); 78 } 79 this.scrollEvent = function () { 80 var that=this; 81 $(window).scroll(function () { 82 //文档高度 83 var docLength = $(document).height(); 84 //窗口高度 85 var winLength = $(window).height(); 86 //滚动条滚动高度 87 var scrollLength = $(window).scrollTop(); 88 {#console.log(docLength, winLength, scrollLength, parseInt(winLength + scrollLength+1))#} 89 if (winLength + scrollLength + 1 >= docLength) { //此处scrollLength是小数，所以不能直接等于 90 {#alert("ok")#} 91 that.initImg(); 92 {#console.log(5)#} 93 } 94 }) 95 } 96 } 97 </script> 98 </body> 99 </html>
1 from django.shortcuts import render,HttpResponse,redirect 2 from app01 import models 3 import json 4 # Create your views here. 5 6 def waterfall_obj(request): 7 return render(request,"waterfall_object.html") 8 9 def get_imgs(request): 10 NID=request.GET.get("id") 11 img_list=models.Img.objects.filter(id__gt=NID).values("id","name","href") 12 return HttpResponse(json.dumps(list(img_list)))
注意！
在进行滚动事件触发时，由于scrollTop（）的值可能为小数，所以导致滑轮滑到底部时没有触发相应的事件，因此需要进行特别的设置，在上述图片瀑布流的实例中，我采用
winLength+scrollLength+1>=docLengt 解决此问题，再次主要提醒各位读者，如果遇到此类滑轮滑到底部不触发相应事件的问题，应考虑到是scrollTop（）为小数，导致
winLength+scrollLength+1==docLengt 执行异常，因此需要根据需求进行合理的处理。
