`

"瀑布流"2

    博客分类:
  • HTML
 
阅读更多

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>瀑布流</title>
        <script src="https://raw.github.com/RubyLouvre/mass-Framework/master/client/mass.js"></script>
        <script>
            window.onerror = function(){
               location.reload();//如果报错,请它自动刷新。
            }
            $.require("more/random,ready,css,event",function(random){
                //容器的CSS表达式,列数,每列的宽度
                var Waterfall = function(expr, col, colWidth){
                    //构建整体轮廓
                    var container = this.container = $(expr);
                    var pw = container.width();//容器的宽
                    var gw = (pw - col * colWidth)/(col-1);//列间距离
                    this.colWidth = colWidth;
                    this.cols = [];
                    for(var i = 0; i < col ; i++){//随机生成列
                        this.cols[i] = $("<div class='waterfall' />").css({
                            position: "absolute",
                            top: 0,
                            left: (colWidth + gw) * i,
                            width: colWidth,
                            backgroundColor: random.hex()
                        }).appendTo(container);
                    }
                }
                Waterfall.prototype = {
                    //添加板块
                    addBlocks : function(){
                        for(var i = 0; i < 40; i++){//随机生成40个板砖
                            $("<div class='waterfall_block' />").css({
                                margin: 5,
                                width: this.colWidth - 10 ,
                                height: random.num(80, 300),
                                backgroundColor: random.hex()
                            }).appendTo( this.whichCol() );
                        }
                    },
                    //计算出最短的栏栅
                    whichCol:function(el, ret, h){
                        for(var i = 0, shortest = 0; el = this.cols[i]; i++){
                            h = el.height();
                            if(i == 0){
                                shortest = h;
                                ret = el;
                            }
                            if(h < shortest ){
                                shortest = h;
                                ret = el;
                            }
                        }
                        return ret;
                    }
                };

                var waterfall = new Waterfall("body",4,300)
                waterfall.addBlocks();
                $(window).scroll(function(){
                    var clientHeight = $(window).height(),
                    scrollTop = $(window).scrollTop(),
                    scrollHeight = $(document).height();
                    if(clientHeight + scrollTop >=  scrollHeight ){
                        waterfall.addBlocks();
                    }
                })
            })
        </script>
    </head>
    <body>
        <p>
            瀑布流 by 司徒正美
        </p>
    </body>
</html>

分享到:
评论

相关推荐

    瀑布流2种

    根据给定的标题“瀑布流2种”,我们可以理解为这里主要探讨两种基本的瀑布流实现方式。 第一种常见的瀑布流实现是通过CSS布局技术。CSS3中的Flexbox(弹性盒模型)或者Grid(网格布局)可以轻松地实现瀑布流效果。...

    小程序源码 瀑布流布局 (代码+截图)

    小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小...

    微信小程序 瀑布流布局 (源码)

    微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...

    伪瀑布流_uniapp瀑布流_uniapp瀑布流_插件_

    2. `components`:这个目录可能包含了一些自定义的组件,其中很可能就有实现瀑布流功能的核心组件。开发者可以在这里找到瀑布流布局的具体实现,包括样式定义、事件处理、数据绑定等关键部分。 总的来说,这个`uni-...

    微信小程序源码 瀑布流布局(学习版)

    微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...

    纯css3实现横向瀑布流布局,横向瀑布流代码.zip

    瀑布流布局,又称Masonry布局,是一种常见的网页布局方式,尤其在展示图片或者商品时非常流行。这种布局的特点是每个元素(通常是图片)的宽度不固定,但它们的左侧边缘会对齐,形成一种自适应的错落效果,类似于...

    android 瀑布流效果

    在WaterfallDemo_2这个项目中,我们可以看到一个实际的瀑布流布局示例。通过查看源代码,可以学习到如何集成第三方库、自定义Adapter以及实现动态加载等功能。此外,该项目可能还包含了错误处理和性能优化等方面的...

    手机端瀑布流

    2. **CSS Flexbox或Grid布局**:这两种现代CSS布局模型可以方便地创建出瀑布流效果。Flexbox适用于一维布局,而Grid则更适合二维布局。它们能轻松处理元素的对齐、大小调整和自适应性,为实现瀑布流提供强大支持。 ...

    javascript 实现瀑布流.zip

    在这个提供的压缩包中,`瀑布流.html`和`瀑布流2.html`很可能是示例代码,可以作为学习和参考的起点。`新建 PPTX 演示文稿.pptx`和`新建 XLSX 工作表.xlsx`可能包含了额外的讲解或数据,但它们不是直接相关的...

    瀑布流Html5网站模板

    2. **响应式设计**:为了适应不同设备和屏幕尺寸,瀑布流布局通常需要结合响应式设计。通过媒体查询(Media Queries)和百分比布局,可以确保网站在手机、平板和桌面电脑上都能呈现出良好的视觉效果。 3. **CSS3 ...

    瀑布流布局 WaterfallLayout

    瀑布流布局,也被称为Masonry布局或Pinterest布局,是一种常用于网页和移动应用中的展示大量图像或内容的方式。它的特点是内容以多列的形式排列,每一列的高度不固定,随着页面滚动,新内容会自然地填充到列的底部,...

    微信小程序——瀑布流布局(截图+源码).zip

    微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+...

    jquery瀑布流实例最流行瀑布流图片展示

    瀑布流布局,也被称为Masonry布局,是一种网页设计中常见的图片或内容展示方式,它以其独特的视觉效果,如同瀑布般逐级下落的排列形式,给用户带来新颖且吸引人的体验。这种布局常用于图片分享网站、社交媒体和电商...

    目前最流行的瀑布流无限加载代码

    瀑布流布局,又称Masonry布局,是一种常见的网页设计布局方式,尤其在图片展示类网站中广泛应用。这种布局方式模仿了瀑布流动的形态,使得页面上的元素可以自适应地按照不同高度排列,形成一种错落有致的效果。在...

    瀑布流(集成懒加载)

    瀑布流布局是一种常见的网页设计方式,它以一种不规则的方式排列元素,通常用于展示图片或商品,使得页面在视觉上呈现出瀑布般的连续效果。在这个项目中,使用了jQuery库来实现这种布局,并结合了懒加载技术,提高了...

    国外多样式瀑布流

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示,如Pinterest网站。这种布局方式的特点是元素不规则地填充到容器中,形成一种类似瀑布下落的效果,每一列的高度根据其内容自动调整,使得页面...

    React Native 瀑布流列表

    2. **瀑布流布局原理**:瀑布流布局的核心在于根据屏幕宽度动态调整列数,并确保每个元素(通常是图片)在垂直方向上对齐。这种布局的关键在于计算每列的高度,当一列的高度超过其他列时,新的元素会添加到下一列,...

    瀑布流布局,点击加载更多效果

    瀑布流布局,也被称为Masonry布局,是一种常用于图片展示或商品列表的网页设计模式,它的特点是元素在页面上自适应地垂直排列,形成一种类似瀑布倾泻的效果。这种布局方式能够有效地利用屏幕空间,使得视觉效果更加...

    安卓瀑布流相关-waterfall瀑布流.zip

    瀑布流布局,也称为瀑布流式布局或无限滚动布局,是一种常见的网页和移动应用界面设计方式,尤其在图片展示和电商应用中广泛使用。这种布局方式最初由Pinterest网站引入,其特点是页面元素(如图片)按照网格排列,...

    等宽瀑布流照片显示

    瀑布流布局,又称Masonry布局,是一种常见的网页布局方式,尤其在展示图片或者商品时非常流行。这种布局方式的特点是每一列的宽度相等,但高度可以不一致,每个元素(如图片)自适应地填充到列中,形成一种自上而下...

Global site tag (gtag.js) - Google Analytics