Rumah > hujung hadapan web > tutorial css > 使用CSS定位瀑布流简单的实现代码

使用CSS定位瀑布流简单的实现代码

高洛峰
Lepaskan: 2017-03-16 10:27:47
asal
1823 orang telah melayarinya

这篇文章介绍使用CSS定位瀑布流简单的实现代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<title>简单CSS定位瀑布流实现方法</title>

<style type="text/css">

/*

 * @name:

 * @time: 2016-12-07

 * @author: wht

*/

body , html {

    height: 100%;

}

/* basic */

body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }

body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }

ul { list-style:none; overflow:hidden; }

img { border:none; }

 

/* content */

.content {margin:10px auto; }

 

/* case-list */

.case-list { margin:0 auto; }

.case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}

.case-list li img { display:block;border-radius:5px;margin-left:5px; }

</style>

</head>

 

<body>

 

<!-- content -->

<div class="content" id="content">

    <ul class="case-list" id="case-list">

        <li><img src="1.jpg" alt="" /></li>

        <li><img src="2.jpg" alt="" /></li>

        <li><img src="3.jpg" alt="" /></li>

        <li><img src="4.jpg" alt="" /></li>

        <li><img src="5.jpg" alt="" /></li>

        <li><img src="5.jpg" alt="" /></li>

        <li><img src="7.jpg" alt="" /></li>

        <li><img src="8.jpg" alt="" /></li>

        <li><img src="9.jpg" alt="" /></li>

        <li><img src="10.jpg" alt="" /></li>

        <li><img src="11.jpg" alt="" /></li>

        <li><img src="12.jpg" alt="" /></li>

        <li><img src="13.jpg" alt="" /></li>

        <li><img src="14.jpg" alt="" /></li>

        <li><img src="15.jpg" alt="" /></li>

        <li><img src="16.jpg" alt="" /></li>

        <li><img src="17.jpg" alt="" /></li>

        <li><img src="18.jpg" alt="" /></li>

        <li><img src="19.jpg" alt="" /></li>

        <li><img src="20.jpg" alt="" /></li>

    </ul>

</div>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript">

window.onload = function(){

 

    var windowW=$(window).width();

    //console.log(windowW);

    var imgW=$("#case-list li>img").width();

    var hNum=parseInt(windowW/imgW);

    var cases = $("#case-list li");

    var case_h = new Array();

       

    for(var j=0;j<hNum;j++){            

        case_h[j] = new Array();

    }

  

 

      $.each(cases, function(i){

           

        var hNum=parseInt(windowW/imgW);

        var m = i%hNum;

 

        case_h[m].push(cases.eq(i).height());

        var step = Math.floor(i/hNum); 

        cases.eq(i).css("left", (imgW + 10)*m+"px");

    //    console.log(step);

        if(!step){

            cases.eq(i).css("top", "0");

        }else{       

            var num = 0;

            for(var n = 0; n<step;n++){           

                num += case_h[m][n] + 20;

            }   

            cases.eq(i).css("top", num+"px");

             

        }

    });

}

</script>

</body>

</html>

Salin selepas log masuk


Atas ialah kandungan terperinci 使用CSS定位瀑布流简单的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan