码迷,mamicode.com
首页 > Web开发 > 详细

用jquery实现瀑布流(方式1-固定宽度和列数,按顺序添加图片)

时间:2016-09-25 14:40:58      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        #container{width: 90%;margin:0 auto;}
        .topic {width:200px; border:1px solid #ccc; border-radius:5px; padding:5px; box-shadow:5px 5px 5px #ccc; float:left; margin:5px;}
        .topic img {width:200px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    $(function(){
        
            var conWidth=$("#container").innerWidth(),
                toWidth=$(".topic").eq(0).outerWidth(),
                cols=Math.floor(conWidth/toWidth),
                spacing=(conWidth-toWidth*cols)/(cols+1);
            var html="";
            console.log(cols);
            //向contaner容器中存放cols个列的盒子
            for(var i=0;i<cols;i++){
                html+="<div style=‘display:inline-block;vertical-align:top;width:"+toWidth+"px;margin-left:"+spacing+"px;‘></div>"
            }
            var $conCols=$(html).appendTo("#container");
            //遍历加载的图片
            $(".topic").each(function(index,element){
                var cur=index%cols;
                $conCols.eq(cur).append(element);
            });    
            //动态向页面添加图片
            html="";
            for(var i=16;i<56;i++){
                html+="<div class=‘topic‘><img src=‘img/"+i+".jpg‘></div>";
            }
            $(html).each(function(index,element){
                    var cur=index%cols;
                    $conCols.eq(cur).append(element);
            });
    });
    </script>
</head>
<body>
    <div id="container">
        <div class="topic"><img src="img/1.jpg"></div>
        <div class="topic"><img src="img/2.jpg"></div>
        <div class="topic"><img src="img/3.jpg"></div>
        <div class="topic"><img src="img/4.jpg"></div>
        <div class="topic"><img src="img/5.jpg"></div>
        <div class="topic"><img src="img/6.jpg"></div>
        <div class="topic"><img src="img/7.jpg"></div>
        <div class="topic"><img src="img/8.jpg"></div>
        <div class="topic"><img src="img/9.jpg"></div>
        <div class="topic"><img src="img/10.jpg"></div>
        <div class="topic"><img src="img/11.jpg"></div>
        <div class="topic"><img src="img/12.jpg"></div>
        <div class="topic"><img src="img/13.jpg"></div>
        <div class="topic"><img src="img/14.jpg"></div>
        <div class="topic"><img src="img/15.jpg"></div>
    </div>
</body>
</html>

用jquery实现瀑布流(方式1-固定宽度和列数,按顺序添加图片)

标签:

原文地址:http://www.cnblogs.com/html-go/p/5905815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!