ZhangYang's Blog

jQuery实例及插件

发表于 | 分类于

天气预报

代码

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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .date,
    .city,
    .pm {
      width: 150px;
      background-color: #00FA9A;
      font-size: 1.5em;
      margin: 5px;
      padding: 5px;
    }
    .city {
      background-color: #0ff;
    }
    .pm {
      background-color: #ccc;
    }
    .msg0 {
      width: 250px;
      background-color: #9ff;
      font-size: 1.2em;
      margin: 5px;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="date">日期:<br/><span></span></div>
  <div class="city">城市:<br/><span></span></div>
  <div class="pm">pm2.5:<br/><span></span></div>
  <div class="msg">
    <ul class="msg0">
      <li class="des"></li>
      <li class="tipt"></li>
      <li class="title"></li>
      <li class="zs"></li>
    </ul>
  </div>
  
  <script>
    $.ajax({
      type: 'get',
      url: 'https://jirenguapi.applinzi.com/weather.php',
      cache:false,
    }).done(function(ret){
      // 将字符串转为对象
      var weather = JSON.parse(ret);
      appendHtml(weather);
    })
    function appendHtml(opt){
      // 获取当地的日期
      var $date = opt.date;
      console.log($date);
      $('.date span').text($date);
      // 获取当地的城市
      var $city =  opt.results[0].currentCity;
      console.log($city);
      $('.city span').text($city);
      // 获取当地的pm25
      var $pm = opt.results[0].pm25;
      console.log($pm);
      $('.pm span').text($pm);
      // 获取当地温馨提示对象
      var $msg0 = opt.results[0].index[0];
      console.log($msg0);
      // 获取当地温馨提示的描述
      var $des = $msg0.des;
      $('.msg0 .des').text($des);
      // 获取当地温馨提示的穿衣指数
      var $tipt = $msg0.tipt;
      $('.msg0 .tipt').text($tipt);
      // 获取当地温馨提示的穿衣
      var $title = $msg0.title;
      $('.msg0 .title').text($title);
      // 获取当地温馨提示的热
      var $zs = $msg0.zs;
      $('.msg0 .zs').text($zs);
    }
  </script>
</body>
</html>

效果图

images

回到顶部

代码

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>回到顶部</title>
<link href="" rel="stylesheet">
<style>
  p{
    line-height: 3;
  }
  #go-top{
    position: fixed;
    bottom: 10px;
    right: 10px;
    border: 1px solid red;
    padding: 10px;
    cursor: pointer;
    display: none;
  }
</style>
<body>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容3</p><p>内容1</p>
  <p>内容1</p><p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容4</p><p>内容1</p>
  <p>内容1</p><p>内容1</p>
  <p>内容1</p><p>内容1</p>
  <p>内容6</p><p>内容1</p>
  <p>内容7</p>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <script>
/*
  //方法1，最原始的 jquery 使用方法
  var $goTop = $('<div id="go-top">回到顶部</div>');
  $('body').append($goTop);
  $(window).on('scroll', function(e){
    var offsetTop = $('body').scrollTop();
    console.log(offsetTop);
    if(offsetTop>100){
      $goTop.show();
    }else{
      $goTop.hide();
    }
  })
  $goTop.on('click', function(){
    $(window).scrollTop(0);
  });
*/
  // 方法2， 经过简单的包装一下
  var GoTop = {
    init: function(){
      if($('#go-top').length > 0){
        return;
      }
      var $goTop = $('<div id="go-top">回到顶部</div>');
      $('body').append($goTop);
      this.$goTop = $goTop;
      this.bind();
    },
    bind: function(){
      var self = this;
      $(window).on('scroll', function(e){
        var offsetTop = $('body').scrollTop();
        if(offsetTop>100){
          self.$goTop.show();
        }else{
          self.$goTop.hide();
        }
      })
      this.$goTop.on('click', function(){
        $(window).scrollTop(0);
      });
    }
  }
/*
  //方法3， 用了立即执行函数表达式，来实现封装
  var GoTop = (function(){
    var $goTop = $('<div id="go-top">回到顶部</div>');
    $('body').append($goTop);
    function init (){
      $(window).on('scroll', function(e){
        var offsetTop = $('body').scrollTop();
        console.log(offsetTop);
        if(offsetTop>100){
          $goTop.show();
        }else{
          $goTop.hide();
        }
      })
      $goTop.on('click', function(){
        $(window).scrollTop(0);
      });
    }
    return {
      init: init
    }
  })();
*/
GoTop.init();
  </script>
</body>
</html>

效果图

images

图片懒加载效果

代码

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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    ul, 
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    .pic {
      width: 1240px;
      margin: 0 auto;
    }
    .pic > li {
      float: left;
      border: 1px solid;
      width: 400px;
      height: 300px;
      margin: 5px;
    }
    .pic > li > img {
      width: 100%;
    }
  </style>
</head>
<body>
  <ul class="pic clearfix">
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg" alt=""></li>
    <li><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg" alt=""></li>  
  </ul>
  
  <script>
    var $img = $('.pic img').not('.show');
    loadImg();
    $(window).on('scroll',function(){
      setTimeout(function(){
        loadImg();
      },1500);
    })
    function loadImg(){
      // 遍历未添加class为load的元素
      $img.each(function(){
        if(isVisible($(this)) && $(this).not('.show').length > 0){
          var url = $(this).attr('data-src');
          $(this).attr('src',url);
          $(this).addClass('show');
        }
      })
    }
    function isVisible($node) {
      var $offset = $node.offset().top;
      var $scrollTop = $(window).scrollTop();
      var $height = $node.outerHeight();
      var $windowHeight = $(window).height();
      if ($windowHeight + $scrollTop > $offset && $scrollTop < $offset + $height){
        return true
      } else {
        return false
      }
    }
  </script>
</body>
</html>

效果图

images

ajax + 新闻懒加载效果

前端代码

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
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<script src="/jquery-3.2.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    ul,
    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #news > li {
      width: 600px;
      border: 1px solid #000080;
      border-radius: 5px;
      font-size: 1em;
      margin: 0 auto;
      text-align: center;
      padding: 5px;
      margin-top: 10px;
    }
    .btn {
      width: 200px;
      display: block;
      margin: 0 auto;
      margin-top: 20px;
      font-size: 1.5em;
      padding: 10px;
      background: #0ff;
      visibility: hidden;
    }
    h3 {
      text-align: center;
      font-size: 2em;
    }
  </style>
</head>
<body>
    <ul id="news"></ul>
    <button id="more" class="btn">加载更多</button>
  
    <script>
      var $news = $('#news');
      var $btn = $('#more');
      var $len = 3;
      var lock = true;
      var isOver = false;
	  
	  // 页面刚开始获取数据
      getNews(); 
      $(window).on('scroll',function(){
        if(isVisible($btn) && lock && !isOver){
          getNews();
        }
      })
      function getNews(){
        if(!lock){
          return;
        }
        // 上一条请求未到来前,滚动滚动条不会发请求
        lock = false;
        $.ajax({
          url: '/loadMore',
          type: 'get',
          data: {
            len: $len,
            index: $news.children('li').length
          }
        }).done(function(ret){
          lock = true;
          appendHtml(ret);
          if(isVisible($btn) && lock && !isOver){
            getNews();
          }
        }).fail(function(){
          console.log('服务器异常');
        })
      }
      function appendHtml(news){
        if(news.length === 0){
          // 加载至最后一条时,不再发请求
          isOver = true;
          $news.append("<h3>" + "没有更多了" + "</h3>");
          return;
        }
        for(var i = 0; i < news.length; i++){
          $news.append("<li>" + news[i] + "</li>");
        }
      }
      function isVisible($node){
        var $offset = $node.offset().top;
        var $scrollTop = $(window).scrollTop();
        var $height = $node.outerHeight();
        var $windowHeight = $(window).height();
        if($windowHeight + $scrollTop > $offset && $scrollTop < $offset + $height){
          return true
        }else{
          return false
        }
      }
    </script>
</body>
</html>

后端代码

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
router.get("/loadMore", function(req, res){
    var len = parseInt(req.query.len)
    var index = parseInt(req.query.index)
    var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露",
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露",
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露",
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露",
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露",
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心",
        "没有中国选手和巨星的110米栏 我们还看吗？",
        "中英上演奥运金牌大战",
        "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
        "最“出柜”奥运？同性之爱闪耀里约",
        "下跪拜谢与洪荒之力一样 都是真情流露"
    ]
    var newsList = news.slice(index, index+len)
        res.send(newsList)
})

效果图

images

轮播

滑动轮播效果

  • 点击左右的箭头能前后滑动，点击底部的框框能直接滑动到对应的图片

代码

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .carousel {
      position: relative;
      width: 300px;
      height: 300px;
      margin:0 auto;
      overflow: hidden;
    }
    .carousel > .img-ct {
      position: absolute;
      width: 1200px;
    }
    .carousel > .img-ct > li {
      float: left;
      width: 300px;
      height: 300px;
    }
    .carousel > .img-ct > li > a > img {
      width: 100%;
      height: 100%;
    }
    .carousel > .btn {
      position: absolute;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 1.5em;
      color: #fff;
      background-color: #666;
      border-radius: 50%;
      opacity: 0.6;
      cursor: pointer;
    }
    .carousel > .btn-pre {
      left: 10px;
      top: 50%;
      margin-top: -20px;
    }
    .carousel > .btn-next {
      right: 10px;
      top: 50%;
      margin-top: -20px;
    }
    .carousel > .bullet {
      position: absolute;
      bottom: 50px;
      width: 100%;
      text-align: center;
    }
    .carousel > .bullet > li {
      display:inline-block;
      width: 30px;
      height: 8px;
      border: 1px solid #0ff;
      border-radius: 50%;
      background-color: #0ff;
      margin: 0 2px;
    }
    .carousel > .bullet > .active {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct clearfix">
      <li data-index="0"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="图片0"></a></li>
      <li data-index="1"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="图片1"></a></li>
      <li data-index="2"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="图片2"></a></li>
      <li data-index="3"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="图片3"></a></li>
    </ul>
    <div class="btn btn-pre">&lt;</div>
    <div class="btn btn-next">&gt;</div>
    <ul class="bullet">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  
  <script>
    var $imgCt = $('.img-ct');
    var $btnPre = $('.btn-pre');
    var $btnNext = $('.btn-next');
    var $bullet = $('.bullet');
    var $curIndex = 0;
    var $imgLock = true;
	
    var $last = $imgCt.children('li').last().clone();
    var $first = $imgCt.children('li').first().clone();
	// 取图片宽度长度
    var $imgWidth = $imgCt.children('li').first().width();
    var $imgLen = $imgCt.children('li').length;
	
	// 在第一张前放最后一张图的克隆
    $imgCt.prepend($last);
    // 在最后一张前放第一张图的克隆
    $imgCt.append($first);
	// 设置父容器宽度,显示第一张图片
    $imgCt.css({
      width: $imgWidth * ($imgLen + 2),
      left: -$imgWidth
    })
    $btnPre.on('click',function(){
      if($imgLock === false) return;
      $imgLock = false;
      pre(1);
    })
    $btnNext.on('click',function(){
      if($imgLock === false) return;
      $imgLock = false;
      next(1);
    })
    $bullet.on('click','li',function(){
      $bulletIndex = $(this).index();
      next($bulletIndex - $curIndex)
    })
    function next(idx){ // idx为1,滚动1页,为2滚动2页
      $imgCt.animate({
        left: "-="+idx*$imgWidth // 每次移动一个图片的宽度
      },function(){
        $curIndex += idx;
        if($curIndex >= $imgLen){ // 当滚到最后一张之后
          $imgCt.css({	
            left: -$imgWidth // 回到第一张图片
          })
          $curIndex = 0;
        }
        $imgLock = true;
        setBullet();
      })
    }
    function pre(idx){
      $imgCt.animate({
        left: "+="+idx*$imgWidth
      },function(){
        $curIndex -= idx;
        if($curIndex < 0){  // 当滚到第一张之前
          $imgCt.css({
            left: -$imgWidth*$imgLen // 回到最后一张图片
          })
          $curIndex = $imgLen-1;
        }
        $imgLock = true;
        setBullet();
      })
    }
    function setBullet(){
      $bullet.children('li').removeClass('active');
      $bullet.children('li').eq($curIndex).addClass('active');
    }
  </script>
</body>
</html>

效果图

  • images

渐变轮播效果

  • 自动轮播，当鼠标移到图片上时候，停止自动轮播，可以手动点击左右箭头切换图片，也可以点击底部的框框直接跳转到对应的图片

代码

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .carousel {
      position: relative;
      width: 300px;
      height: 300px;
      margin:0 auto;
      overflow: hidden;
    }
    .carousel > .img-ct {
      position: absolute;
      width: 1200px;
    }
    .carousel > .img-ct > li {
      float: left;
      width: 300px;
      height: 300px;
    }
    .carousel > .img-ct > li > a > img {
      width: 100%;
      height: 100%;
    }
    .carousel > .btn {
      position: absolute;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 1.5em;
      color: #fff;
      background-color: #666;
      border-radius: 50%;
      opacity: 0.6;
      cursor: pointer;
    }
    .carousel > .btn-pre {
      left: 10px;
      top: 50%;
      margin-top: -20px;
    }
    .carousel > .btn-next {
      right: 10px;
      top: 50%;
      margin-top: -20px;
    }
    .carousel > .bullet {
      position: absolute;
      bottom: 50px;
      width: 100%;
      text-align: center;
    }
    .carousel > .bullet > li {
      display:inline-block;
      width: 30px;
      height: 8px;
      border: 1px solid #0ff;
      border-radius: 50%;
      background-color: #0ff;
      margin: 0 2px;
    }
    .carousel > .bullet > .active {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="carousel">
    <ul class="img-ct clearfix">
      <li data-index="0"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="图片0"></a></li>
      <li data-index="1"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="图片1"></a></li>
      <li data-index="2"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="图片2"></a></li>
      <li data-index="3"><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="图片3"></a></li>
    </ul>
    <div class="btn btn-pre">&lt;</div>
    <div class="btn btn-next">&gt;</div>
    <ul class="bullet">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  
  <script>
    var $imgCt = $('.img-ct');
    var $btnPre = $('.btn-pre');
    var $btnNext = $('.btn-next');
    var $bullet = $('.bullet');
    var $curIndex = 0;
    var $imgLock = true;
    var clock;
    var $last = $imgCt.children('li').last().clone();
    var $first = $imgCt.children('li').first().clone();
    // 容器宽度自适应
    var $imgWidth = $imgCt.children('li').first().width();
    var $imgLen = $imgCt.children('li').length;
    // 在第一张前放最后一张图的克隆
    $imgCt.prepend($last);
    // 在最后一张前放第一张图的克隆
    $imgCt.append($first);
    // 显示第一张图片
    $imgCt.css({
      width: $imgWidth * ($imgLen + 2),
      left: -$imgWidth
    })
    $btnPre.on('click',function(){
      if($imgLock === false) return;
      $imgLock = false;
      pre(1);
    })
    $btnNext.on('click',function(){
      if($imgLock === false) return;
      $imgLock = false;
      next(1);
    })
    $bullet.on('click','li',function(){
      $bulletIndex = $(this).index();
      next($bulletIndex - $curIndex)
    })
    timeClock();
    $('.carousel').on('mouseenter',function(){
      clearInterval(clock);
    })
    $('.carousel').on('mouseleave',function(){
      timeClock();
    })
    function next(idx){
      $imgCt.fadeOut(500,function(){
          $imgCt.css({
            left: "-="+idx*$imgWidth
          })
      })
      $imgCt.fadeIn(500,function(){
        $curIndex += idx;
        if($curIndex >= $imgLen){
          $imgCt.css({
            left: -$imgWidth
          })
          $curIndex = 0;
        }
        $imgLock = true;
        setBullet();
      })
    }
    function pre(idx){
      $imgCt.fadeOut(500,function(){
          $imgCt.css({
            left: "+="+idx*$imgWidth
          })
      })
      $imgCt.fadeIn(500,function(){
        $curIndex -= idx;
        if($curIndex < 0){
          $imgCt.css({
            left: -$imgWidth*$imgLen
          })
          $curIndex = $imgLen-1;
        }
        $imgLock = true;
        setBullet();
      })
    }
    function setBullet(){
      $bullet.children('li').removeClass('active');                             
      $bullet.children('li').eq($curIndex).addClass('active');
    }
    function timeClock(){
      clock = setInterval(function(){
        next(1);
      },2000)
    }
  </script>
</body>
</html>

效果

images

瀑布流

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body {
      padding: 0 100px;
    }
    .ct {
      position: relative;
    }
    .item {
      position: absolute;
      width: 200px;
      height: 100px;
      background-color: #ccc;
      margin: 5px;
      padding: 5px;
      font-size: 1.5em;
      color: #fff;
      transition: all 1s;
    }
    .h1 {
      height: 100px;
      background: #8A2BE2;
    }
    .h2 {
      height: 120px;
      background: #A52A2A;
    }
    .h3 {
      height: 140px;
      background: #5F9EA0;
    }
    .h4 {
      height: 160px;
      background: #D2691E;
    }
    .h5 {
      height: 180px;
      background: #6495ED;
    }
    .h6 {
      height: 200px;
      background: #FF8C00;
    }
    .h7 {
      height: 220px;
      background: #ADFF2F;
    }
    .h8 {
      height: 240px;
      background: #00FA9A;
    }
  </style>
</head>
<body>
  <div class="ct">
    <div class="item h1">1</div>
    <div class="item h2">2</div>
    <div class="item h3">3</div>
    <div class="item h4">4</div>
    <div class="item h5">5</div>
    <div class="item h6">6</div>
    <div class="item h7">7</div>
    <div class="item h8">8</div>
    <div class="item h1">9</div>
    <div class="item h2">10</div>
    <div class="item h3">11</div>
    <div class="item h4">12</div>
    <div class="item h5">13</div>
    <div class="item h6">14</div>
    <div class="item h7">15</div>
    <div class="item h8">16</div>
    <div class="item h1">17</div>
    <div class="item h2">18</div>
    <div class="item h3">19</div>
    <div class="item h4">20</div>
    <div class="item h5">21</div>
    <div class="item h6">22</div>
    <div class="item h7">23</div>
    <div class="item h8">24</div>
    <div class="item h1">25</div>
    <div class="item h2">26</div>
    <div class="item h3">27</div>
    <div class="item h4">28</div>
    <div class="item h5">29</div>
    <div class="item h6">30</div>
    <div class="item h7">31</div>
    <div class="item h8">32</div>
    <div class="item h1">33</div>
    <div class="item h2">34</div>
    <div class="item h3">35</div>
    <div class="item h4">36</div>
    <div class="item h5">37</div>
    <div class="item h6">38</div>
    <div class="item h7">39</div>
    <div class="item h8">40</div>
  </div>
  
  <script>
    var water = (function(){
    function init(){
      waterfull();
      $(window).on('resize',function(){
        waterfull();
      })
    }
    function waterfull(){
      var $ct = $('.ct');
      var $item = $('.item');
      var itemArr = [];
      var itemLen = parseInt($ct.outerWidth(true)/$item.outerWidth(true));
      for(var i = 0; i < itemLen; i++){
        itemArr[i] = 0;
      }
      $item.each(function(){
        var minValue = Math.min.apply(null,itemArr);
        var minIndex = itemArr.indexOf(minValue);
        $(this).css({
          top: itemArr[minIndex],
          left: $(this).outerWidth(true)*minIndex
        })
        itemArr[minIndex] += $(this).outerHeight(true);
      })
    }
    return {
      init: init
    }
  })()
    water.init();
  </script>
</body>
</html>

效果图

images