jQuery.masonry插件实现的照片墙

本例演示如何把不同尺寸的图片零散的贴在墙上。选中后放大图片显示图片说明文字。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1208
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

</head>

<body>
    <div class="content">
        <header>
            <h1>A silent world</h1>
            <span>Image Wall with jQuery and CSS3</span>
        </header>
        <div class="iw_wrapper">
            <ul class="iw_thumbs" id="iw_thumbs">
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/1.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/1.jpg" alt="Thumb1" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/2.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/2.jpg" alt="Thumb2" />
                    <div>
                        <h2>Silence</h2>
                        <p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/3.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/3.jpg" alt="Thumb3" />
                    <div>
                        <h2>Abstraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/8.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/8.jpg" alt="Thumb8" />
                    <div>
                        <h2>Happiness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/9.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/9.jpg" alt="Thumb9" />
                    <div>
                        <h2>Greatness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/10.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/10.jpg" alt="Thumb10" />
                    <div>
                        <h2>Abstraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/6.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/6.jpg" alt="Thumb6" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/7.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/7.jpg" alt="Thumb7" />
                    <div>
                        <h2>Beauty</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/8.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/8.jpg" alt="Thumb8" />
                    <div>
                        <h2>Happiness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/12.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/12.jpg" alt="Thumb12" />
                    <div>
                        <h2>Greatness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/4.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/4.jpg" alt="Thumb4" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/5.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/5.jpg" alt="Thumb5" />
                    <div>
                        <h2>Growth</h2>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/6.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/6.jpg" alt="Thumb6" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/7.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/7.jpg" alt="Thumb7" />
                    <div>
                        <h2>Beauty</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/10.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/10.jpg" alt="Thumb10" />
                    <div>
                        <h2>Abstraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/11.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/11.jpg" alt="Thumb11" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/3.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/3.jpg" alt="Thumb3" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/13.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/13.jpg" alt="Thumb13" />
                    <div>
                        <h2>Happiness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/14.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/14.jpg" alt="Thumb14" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/2.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/2.jpg" alt="Thumb1" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/4.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/4.jpg" alt="Thumb2" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/11.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/11.jpg" alt="Thumb11" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/12.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/12.jpg" alt="Thumb12" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/13.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/13.jpg" alt="Thumb13" />
                    <div>
                        <h2>Happiness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/14.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/14.jpg" alt="Thumb14" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/2.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/2.jpg" alt="Thumb1" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/4.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/4.jpg" alt="Thumb2" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/6.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/6.jpg" alt="Thumb3" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/8.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/8.jpg" alt="Thumb4" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/12.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/12.jpg" alt="Thumb1" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/2.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/2.jpg" alt="Thumb2" />
                    <div>
                        <h2>Silence</h2>
                        <p>Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/3.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/3.jpg" alt="Thumb3" />
                    <div>
                        <h2>Abstraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/4.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/4.jpg" alt="Thumb4" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/5.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/5.jpg" alt="Thumb5" />
                    <div>
                        <h2>Growth</h2>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/6.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/6.jpg" alt="Thumb6" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/7.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/7.jpg" alt="Thumb7" />
                    <div>
                        <h2>Beauty</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/8.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/8.jpg" alt="Thumb8" />
                    <div>
                        <h2>Happiness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/9.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/9.jpg" alt="Thumb9" />
                    <div>
                        <h2>Greatness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/10.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/10.jpg" alt="Thumb10" />
                    <div>
                        <h2>Abstraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/11.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/11.jpg" alt="Thumb11" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/1.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/1.jpg" alt="Thumb12" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/13.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/13.jpg" alt="Thumb13" />
                    <div>
                        <h2>Happiness</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/14.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/14.jpg" alt="Thumb14" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/2.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/2.jpg" alt="Thumb1" />
                    <div>
                        <h2>Virtue</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/4.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/4.jpg" alt="Thumb2" />
                    <div>
                        <h2>Serenity</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
                <li><img src="https://tympanus.net/Tutorials/ImageWall/images/thumbs/6.jpg" data-img="https://tympanus.net/Tutorials/ImageWall/images/full/6.jpg" alt="Thumb3" />
                    <div>
                        <h2>Attraction</h2>
                        <p>Far far away, behind the word mountains there live the blind texts.</p>
                    </div>
                </li>
            </ul>
        </div>
        <div id="iw_ribbon" class="iw_ribbon">
            <span class="iw_close"></span>
            <span class="iw_zoom">Click thumb to zoom</span>
        </div>
    </div>
    <script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/ImageWall/js/jquery.masonry.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Tutorials/ImageWall/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            var $iw_thumbs = $('#iw_thumbs'),
                $iw_ribbon = $('#iw_ribbon'),
                $iw_ribbon_close = $iw_ribbon.children('span.iw_close'),
                $iw_ribbon_zoom = $iw_ribbon.children('span.iw_zoom');

ImageWall = (function() {
                // window width and height
                var w_dim,
                    // index of current image
                    current = -1,
                    isRibbonShown = false,
                    isFullMode = false,
                    // ribbon / images animation settings
                    ribbonAnim = {
                        speed: 500,
                        easing: 'easeOutExpo'
                    },
                    imgAnim = {
                        speed: 400,
                        easing: 'jswing'
                    },
                    // init function : call masonry, calculate window dimentions, initialize some events
                    init = function() {
                        $iw_thumbs.imagesLoaded(function() {
                            $iw_thumbs.masonry({
                                isAnimated: true
                            });
                        });
                        getWindowsDim();
                        initEventsHandler();
                    },
                    // calculate window dimentions
                    getWindowsDim = function() {
                        w_dim = {
                            width: $(window).width(),
                            height: $(window).height()
                        };
                    },
                    // initialize some events
                    initEventsHandler = function() {

// click on a image
                        $iw_thumbs.delegate('li', 'click', function() {
                            if ($iw_ribbon.is(':animated')) return false;

var $el = $(this);

if ($el.data('ribbon')) {
                                showFullImage($el);
                            } else if (!isRibbonShown) {
                                isRibbonShown = true;

$el.data('ribbon', true);

// set the current
                                current = $el.index();

showRibbon($el);
                            }
                        });

// click ribbon close
                        $iw_ribbon_close.bind('click', closeRibbon);

// on window resize we need to recalculate the window dimentions
                        $(window).bind('resize', function() {
                                getWindowsDim();
                                if ($iw_ribbon.is(':animated'))
                                    return false;
                                closeRibbon();
                            })
                            .bind('scroll', function() {
                                if ($iw_ribbon.is(':animated'))
                                    return false;
                                closeRibbon();
                            });

},
                    showRibbon = function($el) {
                        var $img = $el.children('img'),
                            $descrp = $img.next();

// fadeOut all the other images
                        $iw_thumbs.children('li').not($el).animate({
                            opacity: 0.2
                        }, imgAnim.speed);

// increase the image z-index, and set the height to 100px (default height)
                        $img.css('z-index', 100)
                            .data('originalHeight', $img.height())
                            .stop()
                            .animate({
                                height: '100px'
                            }, imgAnim.speed, imgAnim.easing);

// the ribbon will animate from the left or right
                        // depending on the position of the image
                        var ribbonCssParam = {
                                top: $el.offset().top - $(window).scrollTop() - 6 + 'px'
                            },
                            descriptionCssParam,
                            dir;

if ($el.offset().left < (w_dim.width / 2)) {
                            dir = 'left';
                            ribbonCssParam.left = 0;
                            ribbonCssParam.right = 'auto';
                        } else {
                            dir = 'right';
                            ribbonCssParam.right = 0;
                            ribbonCssParam.left = 'auto';
                        }

$iw_ribbon.css(ribbonCssParam)
                            .show()
                            .stop()
                            .animate({
                                width: '100%'
                            }, ribbonAnim.speed, ribbonAnim.easing, function() {
                                switch (dir) {
                                    case 'left':
                                        descriptionCssParam = {
                                            'left': $img.outerWidth(true) + 'px',
                                            'text-align': 'left'
                                        };
                                        break;
                                    case 'right':
                                        descriptionCssParam = {
                                            'left': '-200px',
                                            'text-align': 'right'
                                        };
                                        break;
                                };
                                $descrp.css(descriptionCssParam).fadeIn();
                                // show close button and zoom
                                $iw_ribbon_close.show();
                                $iw_ribbon_zoom.show();
                            });

},
                    // close the ribbon
                    // when in full mode slides in the middle of the page
                    // when not slides left
                    closeRibbon = function() {
                        isRibbonShown = false

$iw_ribbon_close.hide();
                        $iw_ribbon_zoom.hide();

if (!isFullMode) {

// current wall image
                            var $el = $iw_thumbs.children('li').eq(current);

resetWall($el);

// slide out ribbon
                            $iw_ribbon.stop()
                                .animate({
                                    width: '0%'
                                }, ribbonAnim.speed, ribbonAnim.easing);

} else {
                            $iw_ribbon.stop().animate({
                                opacity: 0.8,
                                height: '0px',
                                marginTop: w_dim.height / 2 + 'px' // half of window height
                            }, ribbonAnim.speed, function() {
                                $iw_ribbon.css({
                                    'width': '0%',
                                    'height': '126px',
                                    'margin-top': '0px'
                                }).children('img').remove();
                            });

isFullMode = false;
                        }
                    },
                    resetWall = function($el) {
                        var $img = $el.children('img'),
                            $descrp = $img.next();

$el.data('ribbon', false);

// reset the image z-index and height
                        $img.css('z-index', 1).stop().animate({
                            height: $img.data('originalHeight')
                        }, imgAnim.speed, imgAnim.easing);

// fadeOut the description
                        $descrp.fadeOut();

// fadeIn all the other images
                        $iw_thumbs.children('li').not($el).animate({
                            opacity: 1
                        }, imgAnim.speed);
                    },
                    showFullImage = function($el) {
                        isFullMode = true;

$iw_ribbon_close.hide();

var $img = $el.children('img'),
                            large = $img.data('img'),

// add a loading image on top of the image
                            $loading = $('<span class="iw_loading"></span>');

$el.append($loading);

// preload large image
                        $('<img/>').load(function() {
                            var $largeImage = $(this);

$loading.remove();

$iw_ribbon_zoom.hide();

resizeImage($largeImage);

// reset the current image in the wall
                            resetWall($el);

// animate ribbon in and out
                            $iw_ribbon.stop().animate({
                                opacity: 1,
                                height: '0px',
                                marginTop: '63px' // half of ribbons height
                            }, ribbonAnim.speed, function() {
                                // add the large image to the DOM
                                $iw_ribbon.prepend($largeImage);

$iw_ribbon_close.show();

$iw_ribbon.animate({
                                    height: '100%',
                                    marginTop: '0px',
                                    top: '0px'
                                }, ribbonAnim.speed);
                            });
                        }).attr('src', large);

},
                    resizeImage = function($image) {
                        var widthMargin = 100,
                            heightMargin = 100,

windowH = w_dim.height - heightMargin,
                            windowW = w_dim.width - widthMargin,
                            theImage = new Image();

theImage.src = $image.attr("src");

var imgwidth = theImage.width,
                            imgheight = theImage.height;

if ((imgwidth > windowW) || (imgheight > windowH)) {
                            if (imgwidth > imgheight) {
                                var newwidth = windowW,
                                    ratio = imgwidth / windowW,
                                    newheight = imgheight / ratio;

theImage.height = newheight;
                                theImage.width = newwidth;

if (newheight > windowH) {
                                    var newnewheight = windowH,
                                        newratio = newheight / windowH,
                                        newnewwidth = newwidth / newratio;

theImage.width = newnewwidth;
                                    theImage.height = newnewheight;
                                }
                            } else {
                                var newheight = windowH,
                                    ratio = imgheight / windowH,
                                    newwidth = imgwidth / ratio;

theImage.height = newheight;
                                theImage.width = newwidth;

if (newwidth > windowW) {
                                    var newnewwidth = windowW,
                                        newratio = newwidth / windowW,
                                        newnewheight = newheight / newratio;

theImage.height = newnewheight;
                                    theImage.width = newnewwidth;
                                }
                            }
                        }

$image.css({
                            'width': theImage.width + 'px',
                            'height': theImage.height + 'px',
                            'margin-left': -theImage.width / 2 + 'px',
                            'margin-top': -theImage.height / 2 + 'px'
                        });
                    };

return {
                    init: init
                };
            })();

ImageWall.init();
        });
    </script>
</body>

</html>

本例演示如何把不同尺寸的图片零散的贴在墙上。选中后放大图片显示图片说明文字。

模板，教程

编辑器支持Emmet

快捷键

本例演示如何把不同尺寸的图片零散的贴在墙上。选中后放大图片显示图片说明文字。

模板，教程

使用jQuery Masonry插件实现的作品展示瀑布流模板

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：