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

Posted 2020-08-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery实现瀑布流(方式1-固定宽度和列数，按顺序添加图片)相关的知识，希望对你有一定的参考价值。

<!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-固定宽度和列数，按顺序添加图片)的主要内容，如果未能解决你的问题，请参考以下文章