代码最少的网页瀑布流效果

最新推荐文章于 2023-11-25 13:32:48 发布
最新推荐文章于 2023-11-25 13:32:48 发布
阅读量2k 收藏
点赞数 1
分类专栏： Ajax JavaScript 前台页面制作 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>代码最少的瀑布流实现</title>
        <style>
            html {
                _background: url(about:blank);
            }
            
            body {
                background-color: lightgreen;
                color: #333;
                overflow-x: hidden;
            }
            
            body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
                margin: 0;
                padding: 0;
            }
            
            body, button, input, select, textarea {
                font: 12px / 1.5 Microsoft YaHei, Tahoma, Helvetica, Arial, simsun
            }
            
            address, cite, dfn, em, var, i {
                font-style: normal;
            }
            
            ul, ol {
                list-style: none;
            }
            
            fieldset, img {
                border: 0;
            }
            
            h1 {
                font-size: 18px;
            }
            
            h2 {
                font-size: 14px;
                font-weight: bold;
            }
            
            h3 {
                font-size: 14px;
                font-weight: 400;
            }
            
            h4, h5 {
                font-size: 12px;
                font-weight: 400;
            }
            
            input, textarea, button, select {
                font-size: 12px;
                outline: none;
                resize: none;
                color: #333;
            }
            
            button {
                cursor: pointer;
            }
            
            table {
                border-collapse: collapse;
                border-spacing: 0;
            } .clear {
                clear: both;
                height: 0;
                font-size: 0;
                line-height: 0;
                overflow: hidden;
            } .cle:after, .clearfix:after, .clear_f:after, .cle_float:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden
            } .cle, .clearfix, .clear_f, .cle_float {
                zoom: 1
            } .fl {
                float: left;
            } .fr {
                float: right;
            }
            
            a {
                text-decoration: none;
                color: #333;
                -webkit-transition: color .2s;
                -moz-transition: color .2s;
                -o-transition: color .2s;
                -ms-transition: color .2s;
                transition: color .2s;
            }
            
            a:hover {
                text-decoration: underline;
                color: #ff7d8e;
            }
            
            a:focus {
                outline: none;
            }::
            
            selection {
                background: #ff7d8e;
                color: #fff;
            } #wrapper {
                width: 1008px;
                margin: 15px auto;
            } 
			.brand-list {
                width: 1100px;
                overflow: hidden;
                margin-left: -10px;
            } 
			.brand-list .brand-bd {
                position: relative;
                margin-left: 10px;
                margin-top: 5px;
            } 
			.brand-list .item {
                position: absolute;
                width: 202px;
                background-color: #f8f8f8;
                border: 1px solid #f8f8f8;
                padding: 18px;
                top: 0;
                left: 40%;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -o-transition: all 0.3s;
                -ms-transition: all 0.3s;
                transition: all 0.3s;
            } 
			.brand-list .hover {
                box-shadow: 0px 1px 8px rgba(200, 200, 200, .6);
                background-color: #fff;
                border-color: #c8c8c8;
            } 
			.brand-list .additem {
                padding: 0;
                width: 240px;
                border: none;
            } 
			.brand-list .item h3 {
                font-size: 42px;
                color: #666;
                font-family: arial;
                font-weight: bold;
                line-height: .8;
                margin-bottom: 20px;
            } 
			.brand-list .item p {
                margin-bottom: 15px;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="brand-list">
                <div class="brand-bd cle" id="brand-waterfall">
                    <!-- 循环字母模块 item -->
                    <div class="item" id="brand-a">
                        <h3>A拼音</h3>
                        <p>
                            <a href="#" target="_blank">ARDELL/艾黛尔</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">ANNASUI/安娜苏</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">abeeco</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">AFU/阿芙</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">adidas/阿迪达斯</a>
                        </p>
                    </div>
                    <div class="item" id="brand-c">
                        <h3>C起头</h3>
                        <p>
                            <a href="#" target="_blank">Fenix/长生鸟</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">For Beloved One/宠爱之名</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">CHARMZONE/婵真</a>
                        </p>
                    </div>
                    <div class="item" id="brand-d">
                        <h3>D开始</h3>
                        <p>
                            <a href="#" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">dodo</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Dior/迪奥</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Dove/多芬</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">DHC/蝶翠诗</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Davidoff/大卫杜夫</a>
                        </p>
                    </div>
                    <div class="item" id="brand-e">
                        <h3>E拼音</h3>
                        <p>
                            <a href="#" target="_blank">N-Dorphin/恩朵娉</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">OPERA/娥佩兰</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">ELF</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">eos</a>
                        </p>
                    </div>
                    <div class="item" id="brand-f">
                        <h3>F拼音头</h3>
                        <p>
                            <a href="#" target="_blank">芳草集</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">THEFACESHOP/菲诗小铺</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Fanxishop/凡茜</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">FANCL/芳珂（芳凯尔）</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">VERSACE/范思哲</a>
                        </p>
                    </div>
                    <div class="item" id="brand-h">
                        <h3>H首字母</h3>
                        <p>
                            <a href="#" target="_blank">LAMER/海蓝之谜</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">BOCOTON/海诺丝丽</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">CO.E/韩伊</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">花瑶花</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">花漾美姬</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">HEY NATURE/韩彩妮</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Hipitch/黑龙堂</a>
                        </p>
                    </div>
                    <div class="item" id="brand-l">
                        <h3>L相关</h3>
                        <p>
                            <a href="#" target="_blank">LAMER/海蓝之谜</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">BOCOTON/海诺丝丽</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">CO.E/韩伊</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">CO.E/韩伊</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">CO.E/韩伊</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Herbacin/贺本清</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">花瑶花</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">花漾美姬</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">HEY NATURE/韩彩妮</a>
                        </p>
                        <p>
                            <a href="#" target="_blank">Hipitch/黑龙堂</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <script id="jquery_183" type="text/javascript" class="library" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js">
        </script>
        <script>
            $(function(){
                $('#brand-waterfall').waterfall();
            });
            // 瀑布流插件
            // pannysp 2013.4.9
            ;
            (function($){
                $.fn.waterfall = function(options){
                    var df = {
                        item: '.item',
                        margin: 15,
                        addfooter: true
                    };
                    options = $.extend(df, options);
                    return this.each(function(){
                        var $box = $(this), pos = [], _box_width = $box.width(), $items = $box.find(options.item), _owidth = $items.eq(0).outerWidth() + options.margin, _oheight = $items.eq(0).outerHeight() + options.margin, _num = Math.floor(_box_width / _owidth);
                        (function(){
                            var i = 0;
                            for (; i < _num; i++) {
                                pos.push([i * _owidth, 0]);
                            }
                        })();
                        $items.each(function(){
                            var _this = $(this), _temp = 0, _height = _this.outerHeight() + options.margin;
                            
                            _this.hover(function(){
                                _this.addClass('hover');
                            }, function(){
                                _this.removeClass('hover');
                            });
                            
                            for (var j = 0; j < _num; j++) {
                                if (pos[j][1] < pos[_temp][1]) {
                                    //暂存top值最小那列的index
                                    _temp = j;
                                }
                            }
                            this.style.cssText = 'left:' + pos[_temp][0] + 'px; top:' + pos[_temp][1] + 'px;';
                            //插入后，更新下该列的top值
                            pos[_temp][1] = pos[_temp][1] + _height;
                        });
                        
                        // 计算top值最大的赋给外围div
                        (function(){
                            var i = 0, tops = [];
                            for (; i < _num; i++) {
                                tops.push(pos[i][1]);
                            }
                            tops.sort(function(a, b){
                                return a - b;
                            });
                            $box.height(tops[_num - 1]);
                            //增加尾部填充div
                            if (options.addfooter) {
                                addfooter(tops[_num - 1]);
                            }
                        })();
                        function addfooter(max){
                            var addfooter = document.createElement('div');
                            addfooter.className = 'item additem';
                            for (var i = 0; i < _num; i++) {
                                if (max != pos[i][1]) {
                                    var clone = addfooter.cloneNode(), _height = max - pos[i][1] - options.margin;
                                    clone.style.cssText = 'left:' + pos[i][0] + 'px; top:' + pos[i][1] + 'px; height:' + _height + 'px;';
                                    $box[0].appendChild(clone);
                                }
                            }
                        }
                    });
                }
            })(jQuery);
        </script>
    </body>
</html>






今晚打酱油8
关注
专栏目录
picospeen：某些页面中的代码最少的网页，例如pico学校或星期五晚上funkin中的pico，像飞旋镖一样旋转
02-27
皮皮 一些网页代码最少的网页，例如在pico学校或星期五晚上funkin，像飞旋镖一样旋转 开发：zettaexa 想法：pico＃1000 访问!!!!!： :
网页瀑布布局代码
daditao的专栏
03-14 841
瀑布流以及回顶部的效果 *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; wi
JS实现页面瀑布流效果
gsy445566778899的博客
05-26 1910
瀑布流，是比较流行的一种网站页面，视觉表现为参差不齐的多栏布局，随着窗口的缩放会自动计算并重新排序；
html流布局代码,瀑布流布局实现的代码
weixin_36215903的博客
06-18 412
这篇文章给大家介绍的内容是关于瀑布流布局实现的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。index.htmlwaterfall layout ...
js实现网页瀑布流布局
dengbeizhuo8768的博客
12-06 90
效果图： html代码实现网页布局： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="I...
最少代码的瀑布流实现预览效果
09-01
在“最少代码的瀑布流实现预览效果”这个主题中，我们关注的是如何高效简洁地创建一个功能完善的瀑布流预览效果。这通常涉及到以下几个关键知识点： 1. **CSS Flexbox或Grid布局**：CSS3的新特性Flexbox和Grid提供...
最少的瀑布流实现预览效果特效代码
03-20
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在图片展示、商品列表等场景下广泛应用。这种布局的特点是让元素自适应地填充到容器中，形成类似瀑布的效果，每一列的高度根据内容自动调整，左右列...
最少代码的瀑布流实现预览效果.zip
07-04
在本案例中，“最少代码的瀑布流实现预览效果”是为了展示如何用最小的代码量实现这一效果，特别是在Chrome浏览器或全屏模式下，能够提供最佳的用户体验。 核心知识点包括： 1. **CSS Flexbox**：瀑布流布局的一个...
JQ 用最少代码实现瀑布流布局
06-08
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局方式的特点是每一列的顶部对齐，但列与列之间的高度不一致，形成一种像瀑布一样逐级下降的效果。在前端开发中...
最少代码的瀑布流实现
10-10
在本案例中，我们将讨论如何利用jQuery实现一个最简洁的瀑布流效果。 首先，我们需要理解jQuery库的作用。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这个瀑布...
最新瀑布流源代码
10-10
最新瀑布流源代码 瀑布流网页拖到最后自动下加载新的内容
html实现各种瀑布流(附源码)
最新发布
全栈工程师，博主正在等你，有合作、疑惑请私信博主。
11-25 4269
html实现各种瀑布流(附源码)，好看的瀑布流，瀑布流源码，源码下载，带分页的瀑布流，无限加载瀑布流，简易的瀑布流等，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
瀑布流网页模型的一个示例
purple_lumpy的博客
04-08 667
结构：  一个大盒子，居中；包含若干个小盒子。每一个小盒子有一个阴影层HTML结构：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;瀑布流&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type=
瀑布流布局实现代码详解
Return_KB的博客
01-09 442
分享一段代码实例，它实现了瀑布流布局效果。 因为当前瀑布流布局还是非常流行的，所以对它的良好掌握还是非常有必要的。 代码实例如下: 0010020030040050060070080090100110120130140150160170180190200210220230240250260270280290300310320330340350360370380390400410420
网页瀑布流布局实现方式
测试猫
09-12 7812
什么是瀑布流网页布局？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 下面来看代码，用纯CSS3来做看效果怎样！ HTML
【学习笔记48】瀑布流代码的实现
yizhiyang
11-28 290
day39：瀑布流代码的实现
HTML5——CSS学习笔记（10）css重置样式
qianfeng_dashuju的博客
10-10 244
重置样式 @charset "utf-8"; html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} body{font-size:16px;font-family: '微软雅黑';} ul,ol,li{list-style:none;} h1,h2,h3,h4,h5,h6{font-size:16px;font-weight: n
CSS总结——瀑布流布局
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
3种方式实现瀑布流布局
热门推荐
杏子
08-06 6万+
今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。
最少背包问题算法详解与代码实现
本文档主要探讨的是"最少背包问题"的Java编程实现，这是一个经典的优化问题，在数学建模和现实场景中广泛应用，比如物流配送、资源分配等。最少背包问题的目标是找到在给定容量限制下，能够装入物品数量最多的组合，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值