javascript瀑布流

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>哇,瀑布流啊</title>
    <style type="text/css">

       @media screen and (min-width:1550px){
            .waterfall-container {
                 width:1400px;
            }
        }

        @media screen and (max-width:1549px) and (min-width:1366px){
            .waterfall-container {
                 width:1200px;
            }
        }
        @media screen and (max-width:1365px) and (min-width:700px) {
            .waterfall-container {
                 width:500px;
            }
        }

        @media screen and (max-width:699px) {
            .waterfall-container {
                 width:350px;
            }
        }

        .waterfall-container{
            top: 0;
            float:left;
            display:inline;
            position:relative;
        }

        .water-molecule {
             position:absolute;
             border: solid 1px #ccc;
             padding: 10px;
             width: 200px;
             top: 0px;
             left: 0px;
             -webkit-transition: all .7s ease-out .1s;
             -moz-transition: all .7s ease-out .1s;
             -o-transition: all .7s ease-out .1s;
             transition: all .7s ease-out .1s
        }
        img { width: 100%; }

    </style>
    </head>
    <body >
        <div>
            哟,好拽的瀑布流!!!
        </div>
        <div style="position:relative">
            <div style="left:0; float:left; display:inline; width:100px">

                <ul id="mediaSet">
                    <li><a href="#">1300px</a></li>
                    <li><a href="#">1100px</a></li>
                    <li><a href="#">900px</a></li>
                    <li><a href="#">600px</a></li>
                </ul>

            </div>
            <div class="waterfall-container">
                  <div class="water-molecule"><a href="images/temp_img02.jpg"><img src="images/temp_img02.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img03.jpg"><img src="images/temp_img03.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img04.jpg"><img src="images/temp_img04.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img05.jpg"><img src="images/temp_img05.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img06.jpg"><img src="images/temp_img06.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img07.jpg"><img src="images/temp_img07.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img08.jpg"><img src="images/temp_img08.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img10.jpg"><img src="images/temp_img10.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img11.jpg"><img src="images/temp_img11.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img12.jpg"><img src="images/temp_img12.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img13.jpg"><img src="images/temp_img13.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img14.jpg"><img src="images/temp_img14.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div>
                  <div class="water-molecule"><a href="images/temp_img15.jpg"><img src="images/temp_img15.jpg"/></a> </div>

            </div>
        </div>

    <script type="text/javascript">

        function minColunmnIndex (arr) {
            var minColumn = 0;
            var min = arr[minColumn];
            for (var i = 1,len=arr.length; i < len; i++) {
                var temp = arr[i];
                if (temp < min) {
                    minColumn = i;
                    min = temp;
                };
            };
            return minColumn;
        }

        Object.extend = function(destination, source) {
            for (var property in source) {
                destination[property] = source[property];
            }
            return destination;
        }

        function waterWall(container,settings){    

            var _settings = {
                margin:10,
                cellClass:"water-molecule"
            };
            if(typeof settings != "undefined"){
                _settings = Object.extend(_settings,settings);
            }
            var margin = _settings.margin;
            var boxes = document.getElementsByClassName(_settings.cellClass);
            var wContainer = container;
            var boxWidth = boxes[0].offsetWidth + margin;

            function waterfall () {
                var columnHeight=[];
                var waterFallWith = container.offsetWidth;
                var n = parseInt(waterFallWith/boxWidth);
                var columnNum = n == 0 ? 1 : n;
                var baseLeft = wContainer.offsetLeft;
                for (var i = 0,l=boxes.length; i <l ; i++) {
                    if (i<columnNum) {
                        columnHeight[i]=boxes[i].offsetHeight+margin;
                        boxes[i].style.top = 0;
                        boxes[i].style.left =  i*boxWidth+margin+‘px‘;
                    } else{
                        var innsertColumn = minColunmnIndex(columnHeight),
                            imgHeight = boxes[i].offsetHeight+ margin;
                        boxes[i].style.top = columnHeight[innsertColumn]+‘px‘;
                        boxes[i].style.left = innsertColumn*boxWidth+margin+‘px‘;
                        columnHeight[innsertColumn] +=imgHeight;
                    };

                };
            };                

            var wf = {
                master: container,
                waterfall:waterfall
            }

            return wf;
        }
        var wf = new waterWall(document.getElementsByClassName("waterfall-container").item(0));
        window.onload = function(){wf.waterfall();};
        window.onresize = function(){
            wf.master.style.width = null;
            wf.waterfall();
        };

        document.getElementById("mediaSet").addEventListener("click",function(ev){
            var link  = ev.target,
            width = link.text;
            wf.master.style.width = width;
            wf.waterfall();

        },false);

    </script>
</body>
</html>

时间: 2024-10-05 12:17:23

javascript瀑布流的相关文章

javascript瀑布流代码实例

javascript瀑布流代码实例:现在瀑布流效果大行其道,各种网站都有应用,尤其是专业的图片类型的网站,本站在特效下载专区也有此应用,当然实现此效果的方法有多种,下面是一段瀑布流代码实例供大家参考. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&

javascript瀑布流效果

<!doctype html> <html lang="en">  <head>   <meta charset="utf-8">   <title>瀑布流演示</title>   <link rel="stylesheet" type="text/css" href="pubu_css.css"/>   <scrip

瀑布流 结合 懒加载 操作实例

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scal

Javascript之瀑布流(一)

哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还需要图片,我会打包. 来上代码. 直接代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>哇,瀑布流啊</title> <style ty

javascript自适应宽度的瀑布流实现思路

这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载更多内容的时候用到的,感兴趣的你可以参考下哦 这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄

javascript 简单的瀑布流

刚开始接触js,就想写写经典的瀑布流,搜了下网上的教程,发现大多是用jquery写的,非常简单,用它也不用考虑兼容性的问题(jquery已经考虑到了),就想自己用原生的js写个简单的瀑布流模型,暂且没有考虑到拖动时自动排版的情形,以后再添加.(发现用原生的js果然步骤比较多啊!很多方法都很底层的!) <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content=&qu

用JavaScript和jQuery实现瀑布流

▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main"> <div class="box"> <div class="pic"><img src="images/1.jpg" alt=""></div> </div>

【Javascript Demo】图片瀑布流实现

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest.美丽说.蘑菇街这类型的网站. 下面是效果: 核心内容: 1.先设置布局 主要HTML代码如下 <div id="container"> <div class="box"> <div class="co

【原创】javascript原生实现图片瀑布流

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <style> *{ padding: 0; margin: 0; } #main{ position: relative; } .box{ float: left; padding: 15px 0 0 15px;