瀑布流案例
阿新 • • 發佈：2018-01-05
.get add left span 成了 得到 執行環境 a + b minimum
html代碼：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible"content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="river.css"> 10 <script src="jquery-1.9.1.min.js"></script> 11 <script src="app.js"></script> 12 13 </head> 14 <body> 15 <div class="container"> 16 <div class="box"> 17 <div class="content"> 18 <img src="1.jpg" alt=""> 19 </div> 20 </div> 21 <div class="box"> 22 <div class="content"> 23 <img src="2.jpg" alt=""> 24 </div> 25 </div> 26 <div class="box"> 27 <div class="content"> 28 <img src="3.jpg" alt=""> 29 </div> 30 </div> 31 <div class="box"> 32 <div class="content"> 33 <img src="1.jpg" alt=""> 34 </div> 35 </div> 36 <div class="box"> 37 <div class="content"> 38 <img src="4.jpg" alt=""> 39 </div> 40 </div> 41 <div class="box"> 42 <div class="content"> 43 <img src="5.jpg" alt=""> 44 </div> 45 </div> 46 <div class="box"> 47 <div class="content"> 48 <img src="6.jpg" alt=""> 49 </div> 50 </div> 51 <div class="box"> 52 <div class="content"> 53 <img src="7.jpg" alt=""> 54 </div> 55 </div> 56 <div class="box"> 57 <div class="content"> 58 <img src="8.jpg" alt=""> 59 </div> 60 </div> 61 <div class="box"> 62 <div class="content"> 63 <img src="9.jpg" alt=""> 64 </div> 65 </div> 66 <div class="box"> 67 <div class="content"> 68 <img src="1.jpg" alt=""> 69 </div> 70 </div> 71 <div class="box"> 72 <div class="content"> 73 <img src="2.jpg" alt=""> 74 </div> 75 </div> 76 <div class="box"> 77 <div class="content"> 78 <img src="3.jpg" alt=""> 79 </div> 80 </div> 81 <div class="box"> 82 <div class="content"> 83 <img src="1.jpg" alt=""> 84 </div> 85 </div> 86 <div class="box"> 87 <div class="content"> 88 <img src="4.jpg" alt=""> 89 </div> 90 </div> 91 <div class="box"> 92 <div class="content"> 93 <img src="5.jpg" alt=""> 94 </div> 95 </div> 96 <div class="box"> 97 <div class="content"> 98 <img src="6.jpg" alt=""> 99 </div> 100 </div> 101 <div class="box"> 102 <div class="content"> 103 <img src="7.jpg" alt=""> 104 </div> 105 </div> 106 <div class="box"> 107 <div class="content"> 108 <img src="8.jpg" alt=""> 109 </div> 110 </div> 111 <div class="box"> 112 <div class="content"> 113 <img src="9.jpg" alt=""> 114 </div> 115 </div> 116 </div> 117 </body> 118 </html> 119 <script src="jquery-1.9.1.min.js"></script> 120 <script src="app.js"></script>
css代碼：
1 img{ 2 width: 100%; 3 height: auto; 4 } 5 .container{ 6 margin: 0 auto; 7 } 8 .box{ 9 float: left; 10 position: relative; 11 } 12 .content{ 13 width: 190px; 14 height: auto; 15 padding: 5px; 16 border:2px solid #888; 17 float: left; 18 position: relative; 19 }
js代碼：
$(function(){ $(window).on(‘load‘,function(){ imgLocation(); //模擬圖片數據傳輸,當頁面滾動的時候獲得該json數據 var dataImg={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘},{‘src‘:‘5.jpg‘}]}; window.onscroll=function(){ //滿足條件的時候進行加載圖片； if(scrollside()){//如果滿足滾動條件，則將圖片拼接到頁面中； $.each(dataImg.data,function(index,value){ var box=$("<div>").addClass("box").appendTo($("#container")); var content=$("<div>").addClass(‘content‘).appendTo(box); // console.log($(value).attr(‘src‘)); $(‘<img>‘).attr(‘src‘,$(value).attr(‘src‘)).appendTo(content) }); imgLocation();//加載完圖片後調用圖片的位置； } }; }); }); function scrollside(){ var box=$(‘.box‘); var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);//獲得最後一個盒子的一半距離頁面頂部的距離； var documentHeight=$(document).width();//頁面的高度 var scrollHeight=$(window).scrollTop();//滾動的高度 // 當最後一張圖片的高度大於滾動的高度+頁面的高度。則允許滾動；否則不滾動 // console.log(scrollHeight); // console.log(documentHeight); return ( lastboxHeight < scrollHeight + documentHeight ) ? true : false; } function imgLocation(){//圖片位置函數 var box=$(‘.box‘); var boxWidth=box.eq(0).width();//獲得第一張圖片的寬度；其實所有的圖片的寬度都是一樣的； var num=Math.floor($(window).width()/boxWidth);//得到的是每一行顯示幾張圖片 // console.log(num);// var boxArr=[];//創建一個數組，裏面來裝第一行圖片的高； box.each(function(index,value){ // console.log(index+‘--‘+value);得到的是第一個元素 var boxHeight=box.eq(index).height();//得到所有圖片的高度； if(index<num){//得出的是第一行的圖片 boxArr[index]=boxHeight;//將第一行圖片的高放入數組中； // console.log(boxHeight);//5584值不對 } else{ var minboxHeight=Math.min.apply(null,boxArr);//獲得最小值 // console.log(minboxHeight);//3131; var minboxIndex=$.inArray(minboxHeight,boxArr); $(value).css({//遍歷圖片 ‘position‘:‘absolute‘, ‘top‘:minboxHeight, ‘left‘:box.eq(minboxIndex).position().left }); boxArr[minboxIndex]+=box.eq(index).height() } }); }
知識點總結：
1.$.inArray() 函數用於在數組中查找指定值，並返回它的索引值（如果沒有找到，則返回-1）；
2.apply() 的作用是改變執行的執行環境。
就是說數組 colH 沒有min這個方法，但是Math對象可以求最小值，有min這個方法
例如 var a = Math.min(3,2,1,4)，那麽a將賦值為1
colH想使用Math對象的min方法，就需要使用call/apply來改變執行環境了。
Math.min(3,2,1,4)等價於 Math.min.apply(null, [3,2,1,4])，null是上下文，傳入的對象對應函數中的this，min函數並沒有使用this，因此這裏可以為null，[3,2,1,4]是給min函數的參數列表。
1 var A = { 2 a: 1 3 } 4 5 A.add = function( b ){ 6 console.log(this.a + b); // 這裏的this是A 7 } 8 9 A.add(3); // => 4 10 11 var B = { 12 a: 4 13 } 14 15 A.add.apply(B,[3]); // => 7， add函數中的this 換成了B
瀑布流案例