jquery练习之瀑布流

最近有空简单学习了下瀑布流，写完后想和大家一起分享下，但我知道我的代码有很多缺陷不足，希望多多包涵。（纯属兴趣非专业学习人士）

众所周知，瀑布流大概分为2种，一种是浮动式的瀑布流，一种是定位式的瀑布流，后者要稍微难于前者，但思维上大同小异。话不多说先上效果图。

1.首先浮动式的瀑布流，这个较简单，需要注意的是对追加图片列的UL的高度的比较，下面为代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动瀑布流</title>
<style type="text/css">
* {padding: 0px;margin: 0px;}    
#box {width: 1000px;margin:50px auto;background:black;}
#box ul {float: left;width: 230px;margin: 10px;list-style-type:none;}
#box ul li img {width: 230px;}
</style>
</head>
<body>
    <div id="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>        
    </div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
function checkHeight(OUL){
            var height=Infinity;
            var Index=0;
            for (var a = 0; a < OUL.length; a++) {
                var now_height=OUL[a].offsetHeight;
                if (now_height<height) {
                    height=now_height;
                    Index=a;
                };
            };
            return Index;
        }

function CreateIMage(){    
            var Obx=document.getElementById('box')
            var OUL=Obx.getElementsByTagName('ul');
        for (var i = 2; i < 13; i++) {
            var IMG=new Image();
            IMG.src="images/"+i+".jpg";
             var Oli=document.createElement('li');
    
            Oli.append(IMG);

            var min_index = checkHeight(OUL);
            OUL[min_index].append(Oli);

        };};

    $(function(){

        CreateIMage();
        window.onscroll = function(){
            var ST = document.documentElement.scrollTop || document.body.scrollTop;
            var vH = document.documentElement.clientHeight;
            if (ST+vH>document.body.scrollHeight*0.8) {
                CreateIMage();
            };


        }

    });


</script>    
</body>
</html>

2。定位式的瀑布流，这个和浮动式的差不多，需要注意的是对追加div的定位，而定位的重点是div的top和left的获取，下面为代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位瀑布流</title>
 6     <style type="text/css">
 7     * {padding: 0px;margin: 0px;}
 8     #box {margin: 50px auto;position: relative;}
 9     </style>
10     <script type="text/javascript" src="js/jquery.js"></script>
11 
12 </head>
13 <body>
14     <div id="box">
15         
16     </div>
17 
18 <script type="text/javascript">
19         function getColor(){
20     var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
21     var colorArray=colorValue.split(",");
22     var _color="#";
23     for(var i=0;i<6;i++){
24          
25         _color+=colorArray[Math.floor(Math.random()*16)]
26          
27         }
28         return _color;
29     }
30 
31         
32         function checkHeight(obj){
33             var height=Infinity;
34             var index=0;
35             for (var a = 0; a < obj.length; a++) {
36             var now_height=obj[a];
37 
38             if (now_height<height) {
39                 height=now_height;
40                 index=a;
41             };
42             };
43 
44             return(index);
45 
46         };
47         
48 
49     $(function(){
50         var Obox=document.getElementById('box');
51           var VW=$(window).width();
52           var Default_width=240;
53           var div_num=Math.floor(VW/Default_width)-1;
54           //设置box的宽度使其居中
55           $("#box").css({"width":Default_width*div_num});
56           var arrHeight=[0,0,0,0];
57         CreateDiv();
58 
59         function CreateDiv(){
60             
61           //初始化一个高度数组
62           
63           for (var i = 2; i < 13; i++) {
64               var oImg=new Image();
65               oImg.src="images/"+i+".jpg";
66               oImg.style.width=230+"px";
67               var Odiv=document.createElement("div");
68               // Odiv.style.backgroundColor=getColor();
69               // Odiv.style.width=230+"px";
70               // var t=Math.ceil(Math.random()*150+150);
71               // Odiv.style.height=t+"px";
72               Odiv.style.position="absolute";
73               Odiv.append(oImg);
74 
75               var min_index=checkHeight(arrHeight);
76               Odiv.style.top=arrHeight[min_index]+"px";
77               Odiv.style.left=min_index*Default_width+5+"px";
78               Obox.append(Odiv);
79 
80               arrHeight[min_index]+=(Odiv.offsetHeight+5);}
81           };
82 
83         window.onscroll=function(){
84             var ST=document.documentElement.scrollTop || document.body.scrollTop;
85             var VH=$(window).height();
86             if (ST+VH>(document.body.scrollHeight)*0.8){
87 
88                 CreateDiv();
89             };
90 
91         }
92     });
93     
94 </script>
95 </body>
96 </html>

 

posted on 2017-04-03 10:10  古月小志  阅读(218)  评论(0)  编辑  收藏  举报