javascript - 扩展图像网格问题

Question

目标:尝试将扩展图像网格合并到我的站点中，具有 3 列和 4 行。我正在使用 810w x 1050h 的区域。

问题:我似乎无法正确渲染 3 x 4 网格。你可以在这里看到我的意思:http://rthhockey.com/coaching2我玩过最小/最大高度都无济于事。

我尝试过的事情:我已经通过 33.3333....% 分发了每个链接似乎没有任何效果。我已经玩代码大约 3 天了，我不想让事情变得更糟。我相信你们中的一个人可以很快发现我遗漏的东西。

这是我在其中找到此网格的 CodePen:https://codepen.io/DanBoulet/pen/YXQBbZ

如有任何帮助，我们将不胜感激。感谢您的宝贵时间。

CSS

 body {
  background-color: #fff;
  color: #ffffff;
  font-family: open sans;
  font-size: 100%;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 100%;
  height: 1050px;
  max-height: 1050px;
  overflow-y: scroll;
  padding: 5px;
}

.expanding-grid {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.expanding-grid .links {
  display: block;
  margin: 0 -1em;
  overflow: hidden;
  padding: 5px;
}
.expanding-grid .links > li {
  box-sizing: border-box;
  float: left;
  padding: 1em;
}
.expanding-grid .links > li a {
  background: #ff2200;
  color: #fff;
  display: block;
  font-size: 24px;
  line-height: 1;
  padding: 25% 1em;
  position: relative;
  width: 250px;
  height: 150px;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.expanding-grid .links > li a:hover {
  background: #ffb733;
}
.expanding-grid .links > li a.active {
  background: #cc8400;
}
.expanding-grid .links > li a.active:after {
  background-color: transparent;
  border-bottom: 0.375em solid #888;
  border-left: 0.375em solid transparent;
  border-right: 0.375em solid transparent;
  bottom: -0.5em;
  content: '';
  height: 0;
  left: 50%;
  margin-left: -0.375em;
  position: absolute;
  width: 0;
}
@media only screen and (max-width: 810px) {
  .expanding-grid .links > li {
    width: 50%;
  }
  .expanding-grid .links > li:nth-of-type(2n+1) {
    clear: left;
  }
}
@media only screen and (min-width: 40em) and (max-width: 810px) {
  .expanding-grid .links > li {
    width: 33.3333333333%;
  }
  .expanding-grid .links > li:nth-of-type(3n+1) {
    clear: left;
  }
}
@media only screen and (min-width: 810px) {
  .expanding-grid .links > li {
    width: 33.3333333333%;
  }
  .expanding-grid .links > li:nth-of-type(4n+1) {
    clear: left;
  }
}
.expanding-grid .spacer {
  background-color: #ff2200;
  clear: both;
  display: block;
  margin: 0 1em;
}
.expanding-grid .expanding-container {
  clear: both;
  display: none;
  overflow: hidden;
  width: 100%;
}
.expanding-grid .expanding-container.expanded, .expanding-grid .expanding-container:target {
  display: block;
}
.expanding-grid .hentry {
  background: #494949;
  box-sizing: border-box;
  clear: both;
  color: #fff;
  min-height: 4em;
  overflow: hidden;
  padding: 1em;
  width: 100%;

}
.expanding-grid .hentry .entry-image {
  box-sizing: border-box;
  float: right;
  margin-left: 1em;
  padding: 0.25em 0 0.52em 1em;
  text-align: center;
  width: 50%;
}
.expanding-grid .hentry .entry-title {
  font-size: 28px;
}
.expanding-grid .close-button {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent;
  color: #fff;
  display: inline-block;
  height: 20px;
  line-height: 1;
  overflow: hidden;
  padding: 1.5em 2em;
  text-decoration: none;
  text-indent: 5em;
  white-space: nowrap;
  width: 20px;
  will-change: opacity;
  z-index: 5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.expanding-grid .close-button.active {
  transition: opacity 0.2s;
}
.expanding-grid .close-button:hover {
  opacity: 0.5;
}

.img-placeholder {
  background: #ffffff;
  color: #fff;
  font-size: 4em;
  font-weight: 300;
  line-height: 1;
  width: 400px;
  height: 350px;
  padding: 5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

HTML
<div class="expanding-grid">

    <ul class="links">
        <li><a href="#section1">Jackson 5</a></li>
        <li><a href="#section2">2</a></li>
        <li><a href="#section3">3</a></li>
        <li><a href="#section4">4</a></li>
        <li><a href="#section5">5</a></li>
        <li><a href="#section6">6</a></li>
        <li><a href="#section7">7</a></li>
        <li><a href="#section8">8</a></li>
        <li><a href="#section9">9</a></li>
        <li><a href="#section10">10</a></li>
        <li><a href="#section11">11</a></li>
        <li><a href="#section12">12</a></li>
    </ul>

    <div id="section1" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Jackson 5</h1>
            <div class="entry-image"><div class="img-placeholder"><img src="https://i.imgur.com/Pa3wzWI.png?1"></div></div>
            <p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck<br>- F3 Skates Inside/Out Pattern Around Face-Off Dot With Puck, Breaks On Goal For Shot<br>- F1 Picks Up Puck Below Far Circle, Matches Timing Of F2 Through Neutral Zone And Dishes Pass To F2<br>-F2 Breaks In On Goal For Shot While F1 Crashes Net For Rebound</p>
        </article>
    </div>

    <div id="section2" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">2</div></div>
            <p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck</p>
        </article>
    </div>

    <div id="section3" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">3</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
        </article>
    </div>

    <div id="section4" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">4</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
        </article>
    </div>

    <div id="section5" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">5</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
        </article>
    </div>

    <div id="section6" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">6</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
        </article>
    </div>

    <div id="section7" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">7</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
        </article>
    </div>

    <div id="section8" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">8</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
        </article>
    </div>

    <div id="section9" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">9</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
        </article>
    </div>

    <div id="section10" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">10</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
        </article>
    </div>

    <div id="section11" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">11</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
        </article>
    </div>

    <div id="section12" class="expanding-container">
        <article class="hentry">
            <h1 class="entry-title">Title</h1>
            <div class="entry-image"><div class="img-placeholder">12</div></div>
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
        </article>
    </div>
</div>

Script
var getLastSiblingInRow = function (element) {
    var candidate = element,
            elementTop = element.offsetTop;

    while (candidate.nextElementSibling !== null) {
        if (candidate.nextElementSibling.offsetTop > elementTop) {
            return candidate;
        }
        candidate = candidate.nextElementSibling;
    }
    return candidate;
};

var calculatePageScrollDistance = function (top, bottom) {
    var windowScrollDistance = $(window).scrollTop(),
            windowHeight = $(window).height(),
            scrollDistanceToTop,
            scrollDistanceToBottom;


    if (windowScrollDistance >= top) {
        return top - windowScrollDistance;
    }

    else if ((windowScrollDistance + windowHeight) >= bottom) {
        return 0;
    }
    else {

        scrollDistanceToTop = top - windowScrollDistance;
        // Find the distance we need to scroll to reveal the entire section.
        scrollDistanceToBottom = bottom - (windowScrollDistance + windowHeight);

        return Math.min(scrollDistanceToTop, scrollDistanceToBottom);
    }
};

var expandingGrid = function (context, options) {
    var defaults = {
        animationDuration: 250,
        linksSelector: '.links a',
        expandingAreaSelector: '.expanding-container',
        closeButtonMarkup: '<a href="#" class="close-button">Close</a>',
        spacerMarkup: '<span class="spacer" aria-hidden="true"/>',
        elementActiveClass: 'active',
        elementExpandedClass: 'expanded',
        onExpandBefore: false,
        onExpandAfter: false
    };

    var settings = $.extend({}, defaults, options);

    var isExpanded = false;
    var activeLink = false;
    var activeExpandedArea = false;
    var activeExpandedAreaTop = false;
    var activeExpandedAreaHeight = false;
    var lastItemInActiveRow = false;
    var activeRowChanged = false;
    var checkExpandedAreaResize = false;
    var $links = $(settings.linksSelector, context);
    var $expandingAreas = $(settings.expandingAreaSelector, context);
    var $closeButton = $(settings.closeButtonMarkup);
    var $spacer = $(settings.spacerMarkup);
    var $secondarySpacer = $spacer.clone();


    var scrollSectionIntoView = function (top, bottom, duration, callback) {
        var animate;
        var scroll = 0;
        var distance = calculatePageScrollDistance(top, bottom);
        var windowScrollDistance = $(window).scrollTop();
        var timeLeft;


        duration = (typeof duration === 'undefined') ? settings.animationDuration : duration;
        timeLeft = duration;

        var start = new Date().getTime();
        var last = start;
        var tick = function() {
            timeLeft = Math.max(duration - (new Date() - start), 0);

            var x = (timeLeft === 0 || distance === 0) ? 0 : ((new Date() - last) / timeLeft * distance);
            var diff = (distance > 0 ? Math.min(x, distance) : Math.max(x, distance));
            distance = distance - diff;
            scroll += diff;
            window.scrollTo(0, windowScrollDistance + scroll);

            last = new Date().getTime();

            if (last - start <= duration) {
                animate = (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
            }
            else {
                if (typeof callback === 'function') {
                    callback();
                }
            }
        };

        tick();
    };


    $links.each(function () {
        var $this = $(this);
        var targetId = $this.attr('href').match(/#([^\?]+)/)[1];
        var target = document.getElementById(targetId);

        if (target) {
            $this.click(function (event) {
                var clickedLink = this;
                var scrollTargetOffset;
                var closeButtonAnimationDelay;

                event.preventDefault();

                // Is this link already expanded?
                if (isExpanded && activeLink === clickedLink) {

                    $closeButton.click();
                }

                else {
                    $links.removeClass(settings.elementActiveClass).filter($this).addClass(settings.elementActiveClass).parent('li').each(function () {
                        var lastSibling = getLastSiblingInRow(this);
                        activeRowChanged = lastSibling !== lastItemInActiveRow;
                        if (activeRowChanged) {
                            lastItemInActiveRow = lastSibling;
                        }

                        if (isExpanded && activeRowChanged) {
                            $secondarySpacer.height($spacer.height());
                            $spacer.height(0).replaceWith($secondarySpacer);
                        }
                        $(lastItemInActiveRow).after($spacer);
                    });
                    if (isExpanded && activeRowChanged) {
                        $secondarySpacer.animate({height: 0}, settings.animationDuration, function () {
                            $(this).detach();
                        });
                        $closeButton.removeClass(settings.elementActiveClass).hide();
                    }
                    scrollTargetOffset = ($secondarySpacer.position().top < $spacer.position().top ? $secondarySpacer.height() : 0);
                    activeExpandedAreaTop = ($spacer.position().top - scrollTargetOffset);
                    $expandingAreas.removeClass(settings.elementExpandedClass).hide().filter(target).each(function () {
                            var $this = $(this);
                            var autoHeight = $this.height();
                            var autoOuterHeight = $this.outerHeight();
                            var initialHeight = (isExpanded && activeExpandedAreaHeight && (activeRowChanged === false)) ? activeExpandedAreaHeight : 0;

                            stopExpandedAreaMonitor();

                            $spacer.animate({height: autoHeight + 'px'}, settings.animationDuration);

                            $this.css({
                                height: initialHeight + 'px',
                                position: 'absolute',
                                left: 0,
                                top: $spacer.position().top + 'px'
                            }).show(0, function () {

                                if (typeof settings.onExpandBefore === 'function') {
                                    settings.onExpandBefore.call(this);
                                }
                            }).animate({
                                height: autoHeight + 'px',
                                top: activeExpandedAreaTop + 'px'
                            }, settings.animationDuration, function () {
                                $this.css({height: 'auto'}).addClass(settings.elementExpandedClass);


                                activeExpandedAreaHeight = $this.height();
                                checkExpandedAreaResize = setInterval(function () {
                                    var activeExpandedAreaNewHeight = $this.height();
                                    if (activeExpandedAreaNewHeight !== activeExpandedAreaHeight) {
                                        activeExpandedAreaHeight = activeExpandedAreaNewHeight;
                                        syncExpandedAreaWithSpacer();
                                    }
                                }, 1000);


                                if (typeof settings.onExpandAfter === 'function') {
                                    settings.onExpandAfter.call(this);
                                }
                            });

                            var scrollTargetTop = $(clickedLink).offset().top - scrollTargetOffset;
                            var scrollTargetBottom = $this.offset().top + autoOuterHeight + 20 - scrollTargetOffset;
                            scrollSectionIntoView(scrollTargetTop, scrollTargetBottom);
                        });


                    closeButtonAnimationDelay = (isExpanded && activeRowChanged && ($this.parent().index() > $(activeLink).parent().index())) ? settings.animationDuration : (settings.animationDuration / 4);
                    $closeButton.css({
                            position: 'absolute',
                            right: 0,
                            top: activeExpandedAreaTop + 'px'
                        }).delay(closeButtonAnimationDelay).fadeIn(settings.animationDuration, function () {
                            $(this).addClass(settings.elementActiveClass);
                        });


                    activeLink = this;
                    activeExpandedArea = target;
                    isExpanded = true;
                }
            });
        }
    });

    $closeButton.appendTo(context).hide().click(function (event) {
        var $activeLink = $(activeLink);
        var activeLinkTopOffset = $activeLink.offset().top;
        var activeLinkBottomOffset = activeLinkTopOffset + $activeLink.outerHeight();

        event.preventDefault();

        $links.removeClass(settings.elementActiveClass);
        $expandingAreas.slideUp(settings.animationDuration).removeClass(settings.elementExpandedClass);
        $closeButton.removeClass('active').hide();
        $spacer.animate({height: 0}, settings.animationDuration, function () {
            $spacer.detach();
        });

        scrollSectionIntoView(activeLinkTopOffset, activeLinkBottomOffset);

        stopExpandedAreaMonitor();


        isExpanded = false;
        activeLink = false;
        activeExpandedArea = false;
    });
    var stopExpandedAreaMonitor = function () {
        if (checkExpandedAreaResize) {
            clearInterval(checkExpandedAreaResize);
        }
    };
    var syncExpandedAreaWithSpacer = function () {
        if (activeExpandedArea && isExpanded) {
            $spacer.height($(activeExpandedArea).height());
            activeExpandedAreaTop = $spacer.position().top;
            $closeButton.add(activeExpandedArea).css({top: activeExpandedAreaTop + 'px'});
        }
    };
    var positionSpacer = function () {
        var lastSibling;
        if (activeLink && lastItemInActiveRow && isExpanded) {

            $spacer.detach();
            lastSibling = getLastSiblingInRow($(activeLink).parent()[0]);

            if (lastItemInActiveRow !== lastSibling) {
                console.log(lastSibling);
                lastItemInActiveRow = lastSibling;
            }

            $(lastItemInActiveRow).after($spacer);
        }
    };

    $(window).resize(function () {
        if (isExpanded) {
            positionSpacer();
            syncExpandedAreaWithSpacer();
        }
    });
};

// Create the jQuery plugin.
$.fn.expandingGrid = function (options) {
    return this.each(function () {
        expandingGrid(this, options);
    });
};

})(jQuery, window, document);

$(document).ready(function () {
    $('.expanding-grid').expandingGrid();
});

Answer 1

这可以使用 CSS 网格轻松完成。 W3 Schools 有一个很好的、易于理解的示例，可以在此处找到here .

这是一个使用链接代码的 3x4 响应式网格:

.grid-container {
  max-width: 810px;
  max-height: 1050px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>  
</div>

我已将网格容器设置为允许最大宽度为 810 像素，最大高度为 1050 像素，正如您在帖子中指定的那样。只需在相应的 div 标签内为每个网格元素添加内容，就大功告成了!