css/js 中的砌体效果，第一个元素的宽度和高度是两倍

Question

在一个项目中，我为图像列表做了一个砌体效果。

对于 css 和 javascript 我使用了 this tutorial。

我只想将第一个元素的大小扩大一倍，如下所示：

目前我有这 2 个具有经典砖石效果的文件。

JS

jQuery(function ($) {

    var resizeMasonryItem = function ( item, selector_to_get_height = ".post-entry-content", isfirst = false ){
        /* Get the grid object, its row-gap, and the size of its implicit rows */
        var $grid = $('.masonry-container'),
            rowGap = parseInt( $grid.css('grid-row-gap' ) ),
            rowHeight = parseInt( $grid.css('grid-auto-rows') );
        /*
         * Spanning for any brick = S
         * Grid's row-gap = G
         * Size of grid's implicitly create row-track = R
         * Height of item content = H
         * Net height of the item = H1 = H + G
         * Net height of the implicit row-track = T = G + R
         * S = H1 / T
         */
        var rowSpan
        //if( !isfirst ) {
            rowSpan = Math.ceil((item.find(selector_to_get_height)[0].getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
        /*}else{
            rowSpan = Math.ceil((item.find(selector_to_get_height)[0].getBoundingClientRect().height * 2 + rowGap) / (rowHeight * 2 + rowGap));
        }*/
        /* Set the spanning as calculated above (S) */
        item.css( "grid-row-end", "span " + rowSpan );
        item.css( "height", item.find('.brick-inner').height() );

    };

    var resizeAllMasonryItems = function (selector_to_get_height) {
        var allItems = $('.h4a-brick');

        /*
         * Loop through the above list and execute the spanning function to
         * each list-item (i.e. each masonry item)
         */
        allItems.each(function (index) {
            var isfirst = ( index === 0 );
            resizeMasonryItem( $(this), selector_to_get_height, isfirst );
            $(this).css("opacity", 1);
        });
    };

    $(window).on("load", function() {

        /* Resize all the grid items on the load and resize events */
        $(window).bind("load resize", function(e) {
            resizeAllMasonryItems( ".brick-inner" );
        });

        resizeAllMasonryItems(".brick-inner" );
    });
});

HTML

<section class="masonry-container">
    <article class="brick">
        <div class="brick-inner">
            <div class="post-thumbnail-wrap">
                <div class="post-thumbnail">
                    <a class="post-thumbnail-rollover" href="..." aria-label="Post image"><img src="..." class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" width="851" height="1200">
                    </a>
                </div><!-- End .post-thumbnail -->
            </div><!-- End .post-thumbnail-wrap -->
        </div><!-- End .brick-inner -->
    </article>
</section>

有人有办法做到这一点吗？

Answer 1

我找到了基于 this 的解决方案。

要将宽度第一项拉伸为 2 列，基本上，您需要添加 grid-column-end: span 2;。

CSS

.masonry-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: 5px;
    grid-row-gap: 15px; /* grid-column-gap / 2 */
    grid-column-gap: 30px;
    overflow: hidden;
}

.masonry-container > .brick {
    vertical-align: baseline;
    transition: opacity .25s ease-in-out;
    opacity: 0;
}

JS

var resizeMasonryItem = function ( item, selector_to_get_height = ".post-entry-content", isfirst = false ){
   /* Get the grid object, its row-gap, and the size of its implicit rows */
   var $grid = $('.masonry-container'),
   rowGap = parseInt( $grid.css('grid-row-gap' ) ),
   rowHeight = parseInt( $grid.css('grid-auto-rows') );

   if( isfirst ){
        item.css( "grid-column-end", "span 2" );
   }
   rowSpan = Math.ceil((item.find(selector_to_get_height)[0].getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
   /* Set the spanning as calculated above (S) */
   item.css( "grid-row-end", "span " + rowSpan );
   item.css( "height", item.find( selector_to_get_height ).height() );
};

var resizeAllMasonryItems = function( selector_to_get_height = ".post-entry-content", is_first_option = false ){
   // Get all item class objects in one list
   var allItems = $('.h4a-brick');

   /*
    * Loop through the above list and execute the spanning function to
    * each list-item (i.e. each masonry item)
    */
   allItems.each( function( index ) {
       var isfirst = ( is_first_option && ( index === 0 ) );
       resizeMasonryItem( $(this), selector_to_get_height, isfirst );
       $(this).css( "opacity", 1 );
   });
};

css/js 中的砌体效果，第一个元素的宽度和高度是两倍

masonry effect in css/js with twice width and height for the first element

grid

jquery

masonry