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

jQuery瀑布流简单示例

时间:2016-07-31 17:27:38      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

一下demo是基于window的滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-2.0.0.min.js"></script>
</head>
<script type="text/javascript">
    $(document).ready(function(){
        
        $(window).scroll(myscroll);
        addContent();
        function myscroll(){
            console.log("12");// 500可以更改 
            if($(window).scrollTop()+500>$(document).height()-$(window).height()){
                addContent();
            }
        }
        function addContent(){              //随机添加图片
            for(var i = 0; i< 9;i++){
                var imgPath = "../img/"+Math.floor(Math.random()*5+1)+".PNG";
                var htmls = "<li><img alt=‘‘ src=‘"+imgPath+"‘/></li>"
                $(#ul1).append(htmls);
            }
        }
        
    })
</script>
<body>
<div></div>
<div id="content" ">
    <ul id="ul1" style="list-style: none;">
        <!-- <li>
            <img  src=""/>
        </li> -->
    </ul>
</div>
</body>
</html>

 

jQuery瀑布流简单示例

标签:

原文地址:http://www.cnblogs.com/c9999/p/5723372.html

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