极简瀑布流-摘自慕客网

上家公司的时候,公司要求做个“瀑布流”,说这个主流,这是方向。然后就吭吭吭就去做了

百度了下,实现“瀑布流”的方式,主要是两种,一种是固定行数,然后每行独立去增加;另一种是根据上一行最短的那个的高度去算第二行第一个出现的位置;

当时直接用了taobao的KissY前端组件,实现很简单,如下:

Js部分

$(function () {

            KISSY.use("waterfall", function (S, Waterfall) {
                new Waterfall({
                    container: "#container",    //节点容器
                    minColCount: 2,             //最小列数
                    colWidth: 290               //每列的宽度
                });
            });
        })

页面部分

 <div id=‘container‘ style="position: relative;">

    </div>

  

今年的前段时间,看了<慕客网>的视频,摘下了如下代码,感觉不错。

<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
        #main {
            position: relative;
        }
        .box {
            padding: 5px;
            float: left;
        }
        .pic {
            height: auto;
            padding: 5px;
            border: 1px solid gray;
            border-radius: 5px;
        }
            .pic img {
                width: 200px;
            }
    </style>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script>
        window.onload = function () {
            waterfall();
        }
        window.onscroll = function () {
            var lastBox = $("#main>div").last();
            var lastH = lastBox.offset().top + Math.floor(lastBox.outerHeight());
            var soc = $(window).scrollTop();
            var docHeight = $(window).height();
            if (lastH - docHeight - soc < 50) {
                console.log("加载" + (lastH - docHeight - soc));
                var jsonData = {
                    "data": [
                        { "src": "images/02.jpg" }, { "src": "images/03.jpg" },
                        { "src": "images/01.jpg" }, { "src": "images/02.jpg" },
                        { "src": "images/03.jpg" }, { "src": "images/04.jpg" },
                        { "src": "images/04.jpg" }, { "src": "images/02.jpg" },
                        { "src": "images/05.jpg" }, { "src": "images/04.jpg" },
                    ]
                };
                $(jsonData.data).each(function (i, item) {
                    var oBox = $("<div>").addClass("box").appendTo($("#main"));
                    var pic = $("<div>").addClass("pic").appendTo(oBox);
                    $("<img>").attr("src", item.src).appendTo(pic);
                });
                waterfall();
            }
        }
        function waterfall() {
            var $box = $("#main>div");
            var w = $box.eq(0).outerWidth();
            var cols = Math.floor($(window).width() / w);
            $("#main").width(w * cols).css("margin", "0 auto");
            var hArr = [];
            $box.each(function (i, item) {
                var h = $box.eq(i).outerHeight();
                if (i < cols) {
                    hArr[i] = h;
                } else {
                    var minH = Math.min.apply(null, hArr);
                    var minInx = $.inArray(minH, hArr);
                    // console.log(minH + ‘--‘ + minInx);
                    $(item).css({
                        "position": "absolute",
                        "top": minH + "px",
                        "left": minInx * w + "px"
                    });
                    hArr[minInx] += $box.eq(i).outerHeight();
                }
            });
        }
    </script>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="images/01.jpg" />
            </div>
        </div>
    </div>
</body>
</html>

  

123123

时间: 2024-10-05 21:51:41

极简瀑布流-摘自慕客网的相关文章

《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 &lt;五&gt; NSDicionary

1 int main(int argc, const char * argv[]) { 2 @autoreleasepool { 3 //字典, 存储的内存不是连续的 用key和value进行对应(键值) 4 //kvc 键值编码 5 NSDictionary *dic = [NSDictionary dictionaryWithObject:@"1" forKey:@"a"]; 6 NSLog(@"%@",dic);//以上的方法是不常用的 7

《慕客网:IOS动画案例之会跳动的登入界面(下)》学习笔记 -Sketch的使用

导出选中的一个图片,比如这里我们选中background,然后点击软件的右下角,可以设置导出的尺寸: 然后添加1倍,2倍,3倍的尺寸,因为在ihpne6之后就需要这三个尺寸倍数的UI,以适应不同设备的分辨率. 点击Export Background就可以新建文件夹并导出了: 我突然很想知道PS能不能导出三个尺寸的图片.

《慕客网:IOS-动画入门》学习笔记 &lt;一&gt;

新建Cocoa Touch Class,语言是swift 然后继续为界面添加一个普通的View Controller,并且添加前面视图的静态table的转向剪头指向这个View Controller,然后在这个视图上添加普通的UIView

极简主义生活方式是什么?&lt;转载&gt;

首先强调一点,以下谈到的极简主义(minimalism)均指生活方式,与设计.与艺术.与哲学上的极简主义都没有直接联系,尽管它们中英文都是用同一个词表示.同理下文的极简主义者(minimalist)是指实践极简主义生活方式的人,而不是喜欢极简主义设计风格的人. 一.为什么要选择极简主义? 如果你属于以下的某一个类型,大概极简主义有可能帮到你: 打折购物狂.每次看到打折商品都有买的冲动,觉得这便宜不占白不占.结果买了一堆没用的或者极少使用的玩意,花的钱反而比“有需求时再买(即使是原价不打折的)”更

iOS开发:一个瀑布流的设计与实现(已实现缓存池功能,该功能使得瀑布流cell可以循环利用)

一个瀑布流的实现有三种方式: 继承自UIScrollView,仿写UITableView的dataSource和delegate,创造一个缓存池用来实现循环利用cell 写多个UITableview(UITableView的cell宽度是与UITableView宽度一样的,那么每行可以摆设多个宽度相等的UITableView,从而实现瀑布流),不过这种方法是最差的,因为不能有效的做到循环利用cell 可以自定义UICollectionViewCell的布局,从而实现瀑布流,UICollectio

iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流

在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,Cell的最大以及最小高度是在我们的布局文件中是写死的,换句话说也就是不可配置的.为了循序渐进,由浅入深呢,上篇博客暂且那么写.不过那样写太过死板,本来使用起来比较灵活的自定义布局,如果把其配置参数给写死了,就相当于在笼中的猛兽,再厉害不也白扯蛮. 在今天这篇博客中我们要接着上篇博客中的Demo,使其自定义布局

js实现无限瀑布流

瀑布流 是一种常见的网页布局方式,在许多网站中我们都能看到“瀑布流”的效果,其特征是有网页视窗有多个高度不同宽度相同的“块”组成.因其样式酷似飞流直下的瀑布, 故将这种布局方式称为瀑布流. 生活中瀑布流实例: 花瓣网 在css中我们学习过使用Multi-columns来实现瀑布流的效果 通过 Multi-columns 相关的属性 column-count.column-gap 配合 break-inside 来实现瀑布流布局. 现在,我来介绍一下如何通过js方式来实现瀑布流 <!DOCTYPE

Flask入门小项目 - 搭建极简博客(7)

目录: Flask入门小项目 - 搭建极简博客(1)介绍与项目结构 Flask入门小项目 - 搭建极简博客(2)添加主页 Flask入门小项目 - 搭建极简博客(3)添加登录.登出功能 Flask入门小项目 - 搭建极简博客(4)添加注册功能 Flask入门小项目 - 搭建极简博客(5)添加写文章功能 Flask入门小项目 - 搭建极简博客(6)添加删除文章功能 Flask入门小项目 - 搭建极简博客(7)部署到服务器,实现外网访问 完整程序点这 零.效果 域名的话要等它备案完才能访问... 一

js实现响应式瀑布流

导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 最近在好多地方看到瀑布流的字眼,感觉真的很不错,于是就想自己能不能写一个呢,而且是响应式的.经过将近两天的研究,终于写出来了,先传几张图给大家看看最终的效果:      随着浏览器页面的大小调整.布局从四列逐渐变成三