css html js 实现瀑布流图片展示cid1067-网页前端设计

作者code

Warning: Undefined property: stdClass::$maxbutton id="5" in /www/wwwroot/code.5g-o.com/wp-content/plugins/kama-clic-counter/class.KCCounter.php on line 733

html

 <!DOCTYPE html>
<html lang="en">
<head>
 
<title>jQuery Pinterest Grid Plugin Example</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="..//animate.css">
<script src="..//wow.min.js"></script>
<style>
body {
background: #242323;    
    font-family: 'Roboto Condensed', sans-serif;
    }
#blog-landing {
margin-top: 81px;
position: relative;
max-width: 100%;
width: 100%;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
margin-top: -5px; 
transition: all 0.3s ease-in-out;
}
</style>
 
</head>
<!-- NAVBAR
================================================== -->
<body>
 
 
<div class="container marketing">
<section id="blog-landing">

<article class="white-panel wow slideInLeft" data-wow-duration="0.5s" data-wow-delay="0.5s"> 
<img src="002.jpg" alt="ALT">
<h1>
<a href="#">Putting users first with flat design</a>
</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit.</p>
</article>


<article class="white-panel wow slideInUp" data-wow-duration="0.7s" data-wow-delay="0.7s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/5.png" alt="ALT">
<h1><a href="#">Is your website converting visits into sales? </a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInDown" data-wow-duration="0.9s" data-wow-delay="0.9s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/4.png" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, </p>
</article>
<article class="white-panel wow slideInRight" data-wow-duration="1s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/1.png" alt="ALT">
<h1><a href="#">Putting users first with flat design</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="1.5s" data-wow-delay="1.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/9.gif" alt="ALT">
<h1><a href="#">Is your website converting visits into sales? </a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula</p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/h3.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="0.5s" data-wow-delay="0.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/h1.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="0.5s" data-wow-delay="0.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/about.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non so</p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="0.5s" data-wow-delay="0.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/06.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis.</p>
</article>
<article class="white-panel wow slideInDown" data-wow-duration="1s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/01.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInUp" data-wow-duration="1.5s" data-wow-delay="1.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/7.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="1.7s" data-wow-delay="1.7s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/4.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow bounceInLeft" data-wow-duration="0.5s" data-wow-delay="0.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/1.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non </p>
</article>
<article class="white-panel wow slideInUp" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/girl-1561989_1920.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInRight" data-wow-duration="1.5s" data-wow-delay="1.5s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/girl-1561989_1920.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a</p>
</article>
<article class="white-panel wow slideInUp" data-wow-duration="1s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/01/4.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInRight" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/h2.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec,</p>
</article>
<article class="white-panel wow slideInDown" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/bmw.png" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin </p>
</article>
<article class="white-panel wow slideInUp" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="nature-forest-trees-fog.jpeg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. </p>
</article>
<article class="white-panel wow slideInDown" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/2.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim</p>
</article>
<article class="white-panel wow bounceInLeft" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/8.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consevamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInRight" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/1-1.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. Vivamus ullamcorper aliquam purus, et euismod justo. Nulla</p>
</article>
<article class="white-panel wow slideInLeft" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/9.jpg" alt="ALT">
<h1><a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sollicitudin elit. Curabitur magna ligula, condimentum sed lacus nec, vulputate cursus sem. Sed a semper felis. Curabitur ligula enim, auctor eget rutrum a, convallis non diam. </p>
</article>

<article class="white-panel wow slideInDown" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/02/05.jpg" alt="ALT">

<h1>
<a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a>
</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>


<article class="white-panel wow flipInLeft" data-wow-duration="1.5s" data-wow-delay="1s"> <img src="https://code.5g-o.com/wp-content/uploads/2020/03/h5.jpg" alt="ALT">
<h1>
<a href="#">Fantasy football and Rapha?l: the vector graphic JS library</a>
</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</article>
</section>
</div>

  
<script src="https://code.5g-o.com/wp-content/uploads/2020/02/jquery.min_.js"></script>
<script src="https://code.5g-o.com/wp-content/uploads/2020/04/pinterest_grid.js"></script> 
<script src="..//wow.min.js"></script>
<script>
        $(document).ready(function() {

            $('#blog-landing').pinterest_grid({
                no_columns: 4,
                padding_x: 10,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
            });

        });
    $(function () {

    // animate on scroll
    new WOW().init();
});
    </script>
</body>

 

</html>

js

/*
    Pinterest Grid Plugin
    Copyright 2014 Mediademons
    @author smm 16/04/2014

    usage:

     $(document).ready(function() {

        $('#blog-landing').pinterest_grid({
            no_columns: 4
        });

    });


*/
;(function ($, window, document, undefined) {
    var pluginName = 'pinterest_grid',
        defaults = {
            padding_x: 10,
            padding_y: 10,
            no_columns: 3,
            margin_bottom: 50,
            single_column_breakpoint: 700
        },
        columns,
        $article,
        article_width;

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype.init = function () {
        var self = this,
            resize_finish;

        $(window).resize(function() {
            clearTimeout(resize_finish);
            resize_finish = setTimeout( function () {
                self.make_layout_change(self);
            }, 11);
        });

        self.make_layout_change(self);

        setTimeout(function() {
            $(window).resize();
        }, 500);
    };

    Plugin.prototype.calculate = function (single_column_mode) {
        var self = this,
            tallest = 0,
            row = 0,
            $container = $(this.element),
            container_width = $container.width();
            $article = $(this.element).children();

        if(single_column_mode === true) {
            article_width = $container.width() - self.options.padding_x;
        } else {
            article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
        }

        $article.each(function() {
            $(this).css('width', article_width);
        });

        columns = self.options.no_columns;

        $article.each(function(index) {
            var current_column,
                left_out = 0,
                top = 0,
                $this = $(this),
                prevAll = $this.prevAll(),
                tallest = 0;

            if(single_column_mode === false) {
                current_column = (index % columns);
            } else {
                current_column = 0;
            }

            for(var t = 0; t < columns; t++) {
                $this.removeClass('c'+t);
            }

            if(index % columns === 0) {
                row++;
            }

            $this.addClass('c' + current_column);
            $this.addClass('r' + row);

            prevAll.each(function(index) {
                if($(this).hasClass('c' + current_column)) {
                    top += $(this).outerHeight() + self.options.padding_y;
                }
            });

            if(single_column_mode === true) {
                left_out = 0;
            } else {
                left_out = (index % columns) * (article_width + self.options.padding_x);
            }

            $this.css({
                'left': left_out,
                'top' : top
            });
        });

        this.tallest($container);
        $(window).resize();
    };

    Plugin.prototype.tallest = function (_container) {
        var column_heights = [],
            largest = 0;

        for(var z = 0; z < columns; z++) {
            var temp_height = 0;
            _container.find('.c'+z).each(function() {
                temp_height += $(this).outerHeight();
            });
            column_heights[z] = temp_height;
        }

        largest = Math.max.apply(Math, column_heights);
        _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
    };

    Plugin.prototype.make_layout_change = function (_self) {
        if($(window).width() < _self.options.single_column_breakpoint) {
            _self.calculate(true);
        } else {
            _self.calculate(false);
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

 

在线演示

让链接同时具备两种打开方式
获取源码: CSS GRID 1
下载数:175人次, 文件大小: 2.7 MB, 上传日期: 2020年-11月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,276 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 6元 才能查看此处内容！立即支付

类似文章