如题，页面在这里，建议打开开发者工具查看详细的 HTML。

HTML 如下：

<style type="text/css">
    .my-img-title {
        font-weight: bold;
        font-size: 20px;
        text-align: center;
    }

    .liuying {
        margin: 1px 1px 20px;
        position: relative;
        width: calc(100% - 20px);
        /*height: 830px;*/
        display: block;
    }
    .left-image {
        float: left;
        width: calc(100% / 2 - 10px);
        /*height: calc(100% / 2 - 10px);*/
        /*position: inline;*/
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .right-image {
        float: right;
        width: calc(100% / 2 - 10px);
        /*height: calc(100% / 2 - 10px);*/
        /*position: inline;*/
        display: block;
        margin-bottom: 10px;
        overflow: hidden;
    }
</style>

<div style="z-index:6;background-color:#ffffff;position:sticky;top:10px;opacity:0.6;border-radius:3px;width:90%;margin:0 auto;border:solid 1px #ccc;">
    <p style="color:#444444;font-weight:bold;font-size:14px;padding-left:2px;display:inline;position:sticky;top:10px;">分类：</p>
    <a style="border-bottom:none;font-size:14px;display:inline;margin-left:5px;position:sticky;top:10px;" href="#draws">画</a>
    <a style="border-bottom:none;font-size:14px;display:inline;margin-left:5px;position:sticky;top:10px;" href="#animals">动物</a>
    <a style="border-bottom:none;font-size:14px;display:inline;margin-left:5px;position:sticky;top:10px;" href="#landscapes">风景</a>
</div>

<p class="my-img-title" id="draws">纸与笔的摩擦，黑白之间见风韵</p>
<div class="liuying" id="draws-pic">
    <img src="/pic/pencil-box.jpg" title="这是我一节美术课闲着没事画的，画的是我自己的文具袋。" class="left-image" id="pencil-box">
    <img src="/pic/naozhong.jpg" title="这是我在家里照着姐姐的闹钟画的。" class="right-image" id="naozhong">
    <img src="/pic/class-balloon.jpg" title="这是同学送我的毕业礼物，谢谢那位同学！" class="left-image" id="class-balloon">
    <img src="/pic/classmategift.jpg" title="同学毕业送我这幅画有一段时间了，我暂时没和任何一位同学联系上..." class="right-image" id="classmategift">
</div>

<p class="my-img-title" id="animals">动物憨态，如何不爱</p>
<div class="liuying" id="animals-pic">
    <img src="/pic/dog-banyue-turtle.jpg" title="这是我们曾经养的一只小狗，旁边是乌龟。" class="left-image" id="dog-banyue-turtle">
    <img src="/pic/dog-dhbbs.jpg" title="这是我们去东海半边山路遇的一只狗狗。" class="right-image" id="dog-dhbbs">
    <img src="/pic/Inkeddog-huahua.jpg" title="这是几年前拍的照片。" class="right-image" id="Inkeddog-huahua">
    <img src="/pic/dog-heihei.jpg" title="这是我姥姥养的一只黑狗狗。" class="left-image" id="dog-heihei">
</div>

<p class="my-img-title" id="landscapes">风景如画，一天天的美好</p>
<div class="liuying" id="landscapes-pic">
    <img src="/pic/dgbbs-bridge.jpg" title="这是东海半边山。" class="left-image" id="dgbbs-bridge">
    <img src="/pic/dhbbs-boat.jpg" title="这也是在东海半边山拍的。" class="right-image" id="dgbbs-boat">
    <img src="/pic/dhbbs-ting.jpg" title="拍下的亭子。" class="left-image" id="dhbbs-ting">
    <img src="/pic/tree-sun.jpg" title="去老家的路上，在高速（？）上拍的太阳初升。" class="right-image" id="tree-sun">
</div>

需要更改的 javascript 代码如下：

function divElementResizeHeight() {
var draw = document.getElementById("draws-pic");
var animal = document.getElementById("animals-pic");
var landscape = document.getElementById("landscapes-pic");

var alldraw = document.getElementById("pencil-box").height + document.getElementById("class-balloon").height + 30;
var allanimal = document.getElementById("dog-banyue-turtle").height + document.getElementById("dog-heihei").height + 30;
var alllandscape = document.getElementById("dgbbs-bridge").height + document.getElementById("dhbbs-ting").height + 30;

var drawstr = String(alldraw) + "px";
var animalstr = String(allanimal) + "px";
var landscapestr = String(alllandscape) + "px";

draw.style.height = drawstr;
animal.style.height = animalstr;
landscape.style.height = landscapestr;

console.log("Chaged.");
}
window.addEventListener("load", divElementResizeHeight);
window.addEventListener("resize", divElementResizeHeight);

由于本蒟蒻根本不会用 javascript，只会一个图片一个图片地通过 document.getElementById 的方法获取实时渲染的高度。如果增加一张图片又要改来改去（方法比较傻，我不想每次改 js）。
希望增加图片后不需要再更改 js，js 计算一个 div 容器内 left-image 和 right-image（图片）的总高度谁大谁小，指定 div 容器高度。我的想法是通过 document.getElementsByClassName，但不知道具体怎么改，故求助。

注：bdfs 无果。。。