폭포 흐름 레이아웃

 1 <div id="main">

 2         <div class="box">

 3             <div class="pic">

 4                 <img src="images/0.jpg" alt="">

 5             </div>

 6         </div>

 7         <div class="box">

 8             <div class="pic">

 9                 <img src="images/1.jpg" alt="">

10             </div>

11         </div>

12         <div class="box">

13             <div class="pic">

14                 <img src="images/2.jpg" alt="">

15             </div>

16         </div>

17         <div class="box">

18             <div class="pic">

19                 <img src="images/3.jpg" alt="">

20             </div>

21         </div>

22         <div class="box">

23             <div class="pic">

24                 <img src="images/4.jpg" alt="">

25             </div>

26         </div>

27         <div class="box">

28             <div class="pic">

29                 <img src="images/2.jpg" alt="">

30             </div>

31         </div>

32 </div>

 1 * {

 2     margin: 0;

 3     padding: 0;

 4 }

 5 #main {

 6     position: relative;

 7 

 8 }

 9 .box {

10     padding:15px 0 0 15px;

11     float:left;

12 }

13 .pic {

14     padding: 10px;

15     border: 1px solid #ccc;

16     border-radius: 5px;

17     box-shadow: 0px 0px 5px #ccc;

18     img {

19         width:165px;

20         height:auto;

21     }

22 }

 1 $(window).on("load",function () {

 2     waterfall();

 3     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

 4     //  json  ;

 5     $(window).on("scroll",function () {

 6         if(checkScrollSlide){

 7             $.each(dataInt.data,function (key,value) {

 8                 var oBox=$("<div>").addClass("box").appendTo($("#main"));

 9                 //jQuery    ,    ;

10                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));

11                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);

12             });

13             waterfall();

14         }

15     })

16 });

17 //       ;

18 function waterfall () {

19     var $boxs=$("#main>div");

20     //  #main         div.box;

21 

22     //        ;

23     var w=$boxs.eq(0).outerWidth();

24     //outerWidth()    padding border     ;

25     //var w=$boxs.eq(0).width();

26     //width()            ;

27 

28     var cols=Math.floor($(window).width()/w);

29     //     ;

30     $("#main").width(w*cols).css("margin","0 auto");

31     //  #main          ;

32 

33     var hArr=[];

34     //        ;

35     $boxs.each(function (index,value) {

36     //     box  ;

37     //              ,              ;

38         var h=$boxs.eq(index).outerHeight();

39         //   box    ,

40         if (index<cols) {

41             hArr[index]=h;

42             //            ;

43         } else{

44             var minH=Math.min.apply(null,hArr);

45             //            ;

46             var minHIndex=$.inArray(minH,hArr);

47             //$.inArray()      (minH)   (hArr)  index ;

48             //console.log(value);

49             //   value          box   DOM  !;

50             $(value).css({

51             //$(value): DOM     jQuery  ,      jQuery  ;

52                 "position":"absolute",

53                 "top":minH+"px",

54                 "left":minHIndex*w+"px"

55             });

56             hArr[minHIndex]+=$boxs.eq(index).outerHeight();

57             //        +               =    ;

58         };

59     });

60     // console.log(hArr);

61 };

62 function checkScrollSlide () {

63     var $lastBox=$("#main>div").last();

64     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);

65     var scrollTop=$(window).scrollTop();

66     var documentH=$(window).height();

67     return (lastBoxDis<scrollTop+documentH)?true:false;

68 }