响应式 Javascript 图像大小调整答案

【问题标题】：Responsive Javascript Image Resizing响应式 Javascript 图像大小调整
【发布时间】：2018-05-07 21:41:50
【问题描述】：

对一般性问题表示歉意，但我一直在寻求实现类似于新 Flickr 布局的图像展示，例如 example

我遇到的困难在于响应式设计。我查看了各种插件，包括：Isotope、Wookmark、Grid-a-licious，但所有这些解决方案要么在调整浏览器窗口大小时留下不均匀的边距/排水沟，要么在 pinterest 样式的底部不对齐。只是垂直堆叠在行上。

我想知道是否有人知道可以调整图像大小以完全填充行的宽度并在底部正确对齐所有图像的插件，就像在 Flickr 上一样。

另外，如果知道从哪里开始使用 javascript 来处理这样的事情会很棒吗？

【问题讨论】：

你看过Masonry吗？
感谢您的回复。我确实有，但发现它再次与 Pinterest 样式非常相似，因为它在基本 os 堆叠图像上留下了不均匀的区域。

标签： javascript html css responsive-design

【解决方案1】：

我知道为时已晚，但这个库可以满足您的需要：

http://masonjs.com/

【讨论】：

【解决方案2】：

在我的旅行中，我通过 css3 媒体查询在一些响应式网站上工作过。这是我发现并使用的修改后的解决方案，用于在媒体查询发生更改时触发 javascript：

// define a query here
var theQuery = "(min-width: 960px)";

var mql = window.matchMedia( theQuery );
var TO = setTimeout( function(){}, 100);

var handleMediaChange = function (mediaQueryList) {
    if (mediaQueryList.matches) {

        // the media query evaluates to true
        clearTimeout(TO);
        window.state = 0;

        TO = setTimeout( function(){
            // javascript actions go here   
        }, 100 );

    } else {

        // @media query evaluates to false
        clearTimeout(TO);
        window.state = 0;   

        TO = setTimeout( function(){
            // javascript actions go here   
        }, 100 );

    }
}

mql.addListener(handleMediaChange);
handleMediaChange(mql);

本质上，它允许我们定义一个查询，然后添加一个侦听器来监视窗口对象是否会触发我们的查询。当它触发时，我已经定义了两组 javascript，每组用于媒体查询评估为真或假，但是如果条件，您可以删除它，并让任何更改执行一些脚本...

试一试，希望对你有帮助

【讨论】：