响应式图片组排版模板

Responsive Photoset

模板, photo

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function($, sr) {

// debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function(func, threshold, execAsap) {
            var timeout;

return function debounced() {
                var obj = this,
                    args = arguments;

function delayed() {
                    if (!execAsap)
                        func.apply(obj, args);
                    timeout = null;
                };

if (timeout)
                    clearTimeout(timeout);
                else if (execAsap)
                    func.apply(obj, args);

timeout = setTimeout(delayed, threshold || 100);
            };
        }
        // smartresize 
    jQuery.fn[sr] = function(fn) {
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };

})(jQuery, 'smartresize');

/* Wait for DOM to be ready */
$(function() {

// Detect resize event
    $(window).smartresize(function() {
        // Set photoset image size
        $('.photoset-row').each(function() {
            var $pi = $(this).find('.photoset-item'),
                cWidth = $(this).parent('.photoset').width();

// Generate array containing all image aspect ratios
            var ratios = $pi.map(function() {
                return $(this).find('img').data('org-width') / $(this).find('img').data('org-height');
            }).get();

// Get sum of widths
            var sumRatios = 0,
                sumMargins = 0,
                minRatio = Math.min.apply(Math, ratios);
            for (var i = 0; i < $pi.length; i++) {
                sumRatios += ratios[i] / minRatio;
            };

$pi.each(function() {
                sumMargins += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
            });

// Calculate dimensions
            $pi.each(function(i) {
                var minWidth = (cWidth - sumMargins) / sumRatios;
                $(this).find('img')
                    .height(Math.floor(minWidth / minRatio))
                    .width(Math.floor(minWidth / minRatio) * ratios[i]);
            });
        });
    });
});

/* Wait for images to be loaded */
$(window).load(function() {

// Store original image dimensions
    $('.photoset-item img').each(function() {
        $(this)
            .data('org-width', $(this)[0].naturalWidth)
            .data('org-height', $(this)[0].naturalHeight);
    });

$(window).resize();
});

编译

CSS

html {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
body {
    color: #333;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}
main {
    margin: 0 auto;
    padding: 1.5rem 0;
    width: 80%;
}
h1 {
    font-weight: bold;
    font-size: 2em;
    line-height: 1.5em;
    text-align: center;
}
p {
    margin-bottom: 1.5rem;
}
hr {
    border: none;
    border-top: .125rem solid #ddd;
    margin-bottom: 1.375rem;
}
a {
    border-bottom: 2px solid #333;
    color: #333;
    text-decoration: none;
    transition: all .125s ease-in-out;
}
a:hover {
    border-bottom-color: #4a7298;
    color: #4a7298;
}
/* General photoset style */

.photoset {
    overflow: hidden;
    width: 100%;
}
.photoset .photoset-row {
    margin-bottom: .5rem;
    overflow: hidden;
    width: 150%;
}
.photoset .photoset-row:last-child {
    margin: 0;
}
.photoset .photoset-item {
    display: block;
    float: left;
    margin: 0 .25rem;
}
.photoset .photoset-item:first-child {
    margin-left: 0;
}
.photoset .photoset-item:last-child {
    margin-right: 0;
}
.photoset figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    -webkit-backface-visibility: hidden;
    /* To fix webkit 1px rendering bug */
}
.photoset figcaption {
    background-color: rgba(255, 255, 255, .75);
    box-sizing: border-box;
    font-size: .75rem;
    padding: .5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: all .5s ease-in-out;
}
.photoset-item a {
    border: 0;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.photoset .photoset-item:hover a + figcaption {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.photoset img {
    display: block;
    max-width: 100%;
    transition: all .25s ease-in-out;
}

HTML

<main>
    <h1>Responsive Photoset</h1>
    <p>The photoset is fluid: try resizing your browser. Dealing with margins and photos of different aspect ratios is also never a problem. <a href="https://medium.com/coding-design/7742e6f93d9e" title="Responsive Photosets">Read the tutorial on Medium</a>.
        Made by <a rel="author" href="https://terrymun.com" title="Visit me">Terry</a>.</p>
    <p>A more advanced version of this technique, which dictates the size of the thumbnails depending on screen sizes, is <a href="https://codepen.io/terrymun/full/mvHky">available here</a>.</p>
    <hr />
    <div class="photoset">
        <div class="photoset-row">
            <figure class="photoset-item">
                <a href="https://500px.com/photo/4772670"><img src="https://i.imgur.com/uh5YLj5.jpg" alt="ARoS Aarhus Kunstmuseum" title="ARoS Aarhus Kunstmuseum" />
                </a>
                <figcaption>ARoS Aarhus Kunstmuseum. Photo &copy; Terry Mun</figcaption>
            </figure>
        </div>
        <div class="photoset-row">
            <figure class="photoset-item">
                <a href="https://500px.com/photo/4820790"><img src="https://i.imgur.com/24hrPQn.jpg" alt="A lady walks briskly on a train platform in Bern, Switzerland." title="A lady walks briskly on a train platform in Bern, Switzerland." />
                </a>
                <figcaption>A lady walks briskly on a train platform in Bern, Switzerland. Photo &copy; Terry Mun</figcaption>
            </figure>
            <figure class="photoset-item">
                <a href="https://500px.com/photo/20245695"><img src="https://i.imgur.com/BXo4qAz.jpg" alt="Inside Rundetårn, Copenhagen." title="Inside Rundetårn, Copenhagen." />
                </a>
                <figcaption>Inside Rundetårn, Copenhagen. Photo &copy; Terry Mun</figcaption>
            </figure>
        </div>
    </div>
</main>

Responsive Photoset

模板, photo

编辑器支持Emmet

快捷键

Responsive Photoset

模板, photo

CSS3 响应式图文编排UI模板

方块式动效图文排版模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：